如何使用D3 d3js根据元素的属性分层附加“组成”的元素？

Henry 发表于 Dev

亨利

我正在使用D3.js，并且有一个元素列表，其中的属性描述了这样的类别：

var nodes = [
{id:"a", cat:[0,1]},
{id:"b", cat:[0]},
{id:"c", cat:[0,1,2]}];

每个元素都是通过力布局定位的多圆节点。元素的类别数定义了表示该元素的圆圈数。

我现在拥有的“解决方案”是为每个类别创建图层。强制布局处理数据列表。图层处理svg元素。每层都是一个元素。

在<g class="layer2">I中，为节点c画一个圆，半径= 9；
在<g class="layer1">I中，我为半径a = 6的节点a和c绘制圆；
在<g class="layer0">I中，我为半径为3的节点a，b和c绘制圆；

问题在于，每个数据元素都由分离的图层中的分离的圆圈表示。

我们如何用这样的一组圆圈来表示每个元素：

    <g class="node" id="a">
       <circle>... <circle>...
    </g>
   <g class="node" id="b">
       <circle>...
    </g>
   <g class="node" id="c">
       <circle>... <circle>... <circle>...
    </g>

是否可以在D3风格的代码中分层使用某些内容，例如：

svg.selectAll(".node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("id", function(d){return d.id;}
    //for each category on this node              
    .append("circle")
    .attr("r", function(){ return (cat+1)*3;});

这样的解决方案将是最佳选择。

还是我必须分别创建元素<g class="node" id="...">，selectAll(".node")然后将它们链接到数据（节点列表）？

杰拉尔多·富塔多

在我看来，您只需要嵌套选择：

var groups = svg.selectAll(null)
  .data(nodes)
  .enter()
  .append("g")
  .attr("id", function(d) {
    return d.id
  });

var circles = groups.selectAll(null)
  .data(function(d) {
    return d.cat
  })
  .enter()
  .append("circle")
  //etc...

这是展示它的演示，其中包含您的nodes数据：

var nodes = [{
  id: "a",
  cat: [0, 1]
}, {
  id: "b",
  cat: [0]
}, {
  id: "c",
  cat: [0, 1, 2]
}];

var colors = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("svg");

var groups = svg.selectAll(null)
  .data(nodes)
  .enter()
  .append("g")
  .attr("id", function(d) {
    return d.id
  })
  .attr("transform", function(d, i) {
    return "translate(" + (50 + 100 * i) + ",75)";
  });

var circles = groups.selectAll(null)
  .data(function(d) {
    return d.cat
  })
  .enter()
  .append("circle")
  .attr("r", function(d) {
    return 10 + (d * 10)
  })
  .style("fill", function(d, i) {
    return colors(i)
  });

circles.sort(function(a, b) {
  return d3.descending(a, b)
})

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

如果您检查SVG，将会看到以下内容：

<svg>
    <g id="a" transform="translate(50,75)">
        <circle r="30" style="fill: rgb(31, 119, 180);"></circle>
        <circle r="20" style="fill: rgb(255, 127, 14);"></circle>
    </g>
    <g id="b" transform="translate(150,75)">
        <circle r="30" style="fill: rgb(31, 119, 180);"></circle>
    </g>
    <g id="c" transform="translate(250,75)">
        <circle r="30" style="fill: rgb(31, 119, 180);"></circle>
        <circle r="20" style="fill: rgb(255, 127, 14);"></circle>
        <circle r="10" style="fill: rgb(44, 160, 44);"></circle>
    </g>
</svg>

PS：我正在对圆圈进行排序（看一下代码的底部），以将较小的圆圈置于顶部，使它们可见。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。