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

Question

我想这样做：

这就是我所拥有的：

问题：如何仅为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;
    });

Answer 1

使用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>

代码很容易理解，但如果你遇到了一些你没有得到的东西，请回复我。希望能帮助到你。 :)