如何在D3中为文本div的特定部分着色?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在D3中为文本div的特定部分着色?相关的知识,希望对你有一定的参考价值。

我想这样做:enter image description here

这就是我所拥有的:enter image description here

问题:如何仅为D3中的文本div的特定部分着色?

我知道在html中,这将是<text><span class="red">70,000</span>受伤的人是白人。但是我如何在D3中做到这一点? B / c追加仅生成子元素。无法在1行中的文本元素中追加2个span元素...

D3代码

var size = [60,50,40,30];
    var fontColor = ["iconRed","iconBlue", "iconGreen", "iconOrange"];
    var sizeScale = d3.scaleLinear().domain([1, 2, 3,4]).range(size);
    var fontColorScale = d3.scaleLinear().domain([1, 2, 3,4]).range(fontColor);

var y_position = 420;
    race_frequency_array.forEach(function(element){
      graph1.append("text")
      .attr("id", "raceLabel")
      .attr("x", xPadding)
      .attr("y", y_position)
      .attr("text-anchor", "start")
      .attr("alignment-baseline", "hanging")
      .style("font-size", sizeScale(element.RowNum) + "px")
      .classed(fontColorScale(element.RowNum), true)
      .text("70,000 people injured were white");
      y_position += sizeScale(element.RowNum)+10;
    });
答案

使用foreignObject是一种选择,但我不建议这样做。相反,我找到了为你实际编码的时间,并使其非常动态。我正在使用tspans,这就是如何在长文本中分隔文本并单独设置样式(这也是Mike推荐的方法)。看看我是如何定义数组的,这也使得改变颜色非常动态。

这是一段代码片段:

var size = [60,50,40,30];
    var fontColor = ["iconRed","iconBlue", "iconGreen", "iconOrange"];
    var sizeScale = d3.scaleLinear().domain([1, 2, 3,4]).range(size);
    var fontColorScale = d3.scaleLinear().domain([1, 2, 3,4]).range(fontColor);

var race_frequency_array = [
	[
  	{text: '70%', color: '#d9534f'}, 
    {text: ' of people killed were '}, 
    {text: 'BLACK', color: '#d9534f'}
  ],
  [
  	{text: '20%', color: '#5bc0de'}, 
    {text: ' of people killed were '}, 
    {text: 'WHITE', color: '#5bc0de'}
  ],
  [
  	{text: '7%', color: '#5cb85c'}, 
    {text: ' of people killed were '}, 
    {text: 'LATINO', color: '#5cb85c'}
  ],
  [
  	{text: '3%', color: '#f0ad4e'}, 
    {text: ' of people killed were '}, 
    {text: 'ASIAN', color: '#f0ad4e'}
  ]  
];

var graph1 = d3.select('svg')
							.append('g').attr('class', 'texts');
var xPadding = 10, y_position = 0;
      var texts = graph1.selectAll('text').data(race_frequency_array)
      		.enter().append("text")
		      .attr("id", "raceLabel");
          
     texts     
      .attr("x", xPadding)
      .attr("y", function(d, i) {
      	y_position += sizeScale(i)+10;
      	return y_position; 
      })
      .attr("text-anchor", "start")
      .attr("alignment-baseline", "hanging")
      .style("font-size", function(d, i) { return sizeScale(i) + "px"});
      
      var tspans = texts.selectAll('tspan')
      								.data(function(d) { return d; });
      tspans.enter()
      	.append('tspan')
        .style('fill', function(d) { return d.color; })
        .style('font-weight', '600')
        .text(function(d) { return d.text; });
                     	
    //  y_position += sizeScale(element.RowNum)+10;
<script src="https://d3js.org/d3.v4.min.js"></script>

<svg width="1200" height="400"></svg>

以上是关于如何在D3中为文本div的特定部分着色?的主要内容,如果未能解决你的问题,请参考以下文章

如何根据某些搜索模式在 unix 中为文本文件着色?

有没有办法在占位符文本 QML 中为特定单词着色?

如何在 C++ 中为 GLSL 片段着色器实现 iGlobalTime?

如何在 Windows 控制台中为特定像素着色

如何在 Flutter 中为文本着色

如何在片段着色器中平铺部分纹理