Question

我希望以不同的方式设置属性＆＃34; fonction＆＃34;和＆＃34; nom＆＃34;但我真的不知道从哪里开始。我可能不会需要任何特定的风格，以及＃34; fonction＆＃34;但是，对于＆＃34; nom＆＃34;，我希望文本大胆且颜色与属性＃34;类型＆＃34;相同。

{    
  "fonction": "blah1",
  "nom": "wah1",
  "type": "green", 
  "level": "green"
},   
{    
  "fonction": "blah2",
  "nom": "wah2",
  "type": "yellow", 
  "level": "yellow"
}

以下是用于追加文字的代码的一部分：

var nodeEnter = node.enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + source.y0 + 
           "," + source.x0 + ")"; })
          .on("click", click);
           nodeEnter.append("circle")  
          .attr("r", function(d) { return d.value; })
          .style("stroke", function(d) { return d.type; })
          .style("fill", function(d) { return d.level; });

          nodeEnter.append("text")
         .attr("x", function(d) { return d.children || d._children ? -13 : 13; 
         })
         .attr("dy", ".35em")
         .attr("text-anchor", function(d) { return d.children || d._children ? 
         "end" : "start"; })
         .text(function(d) { return d.fonction + " " + d.nom; })
         .style("fill-opacity", 1e-6);

我在这里使用的代码用于我在这里提出的另一个问题，所以他们不会混在一起。

无法找到告诉D3只有样式的方法＆＃34; nom＆＃34;因为这两个属性都有＆＃34;文本＆＃34;类型。我非常感谢某些方向。

非常感谢。

Answer 1

我建议使用CSS并测试数据以确定动态添加哪个类。类似的东西：

newEvent.append("text")
    .attr('y', 5)
    .attr("x", 15)
    .attr("class", function(d, i) {
        // this will color all the 'odd' numbered
        // text elements "blue"
        if (i % 2 == 0){
             return "event-text"
         } else {
             return "event-text-blue"
         }
     })
     .text(function (d) {
         return d.eventText
     });

不知道这是否是“最佳”方式，但它有效。

CSS

.event-text {
    fill: white;
    text-shadow: 3px 2px gray;
    font-size: 16px;
    font-family: sans-serif;
}
.event-text-blue {
    fill: blue;
    text-shadow: 3px 2px gray;
    font-size: 16px;
    font-family: sans-serif;
}

Answer 2

如果您要将不同的样式应用于不同的文本，则无法使用与您正在执行的text()方法相同的方式附加它们：

.text(function(d) { return d.fonction + " " + d.nom; })

你必须将它们分开。例如，使用<span>：

.text(function(d){ return d.fonction + " ";})
.append("span")
.text(function(d){ return d.nom;});

这是一个使用数据阵列的非常简单的演示：

＆＃13;

var data = [{
  "fonction": "blah1",
  "nom": "wah1",
  "type": "green",
  "level": "green"
}, {
  "fonction": "blah2",
  "nom": "wah2",
  "type": "yellow",
  "level": "yellow"
}];

d3.select("body")
  .selectAll(null)
  .data(data)
  .enter()
  .append("p")
  .style("color", "red")
  .text(function(d) {
    return d.fonction + " ";
  })
  .append("span")
  .style("color", "blue")
  .text(function(d) {
    return d.nom;
  });

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

D3.js中的样式特定文本

2 个答案:

CSS