Question

我正在尝试绘制2个圈子组。第一组包含4个红色圆圈。第二组包含4个绿色圆圈。

我使用D3库及其DOM运算符（重要）。但是屏幕仅显示第一个圈子组。

js：

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

var dataSet = [10, 20, 30, 40];

var circle = svg.selectAll('circle')
    .data(dataSet)
    .enter()
    .append('circle')
    .attr({
        r:function(d){ return d },
        cx:function(d, i){ return i * 100 + 50 },
        cy:50,
        fill: 'red'
    })
    .append('circle')
    .attr({
        r:function(d){ return d },
        cx:function(d, i){ return i * 100 + 50 },
        cy:350,
        fill: 'lime'
    })

Answer 1

问题在于您如何附加：

svg.selectAll("circle")       // select any circles
  .data(dataSet)              // bind data to that selection
  .enter().append("circle")   // return a new selection of entered circles based on the data bind
  .attr({...})                // Modify the selection of entered circles, returning that selection
  .append("circle")           // Append circles as children to the entered circles, returning these new circles as a new selection.
  .attr({})                   // Modify the child circles

这种方法使您可以将圈子作为其他圈子的子元素，而SVG不支持此方法：

<circle> 
   <circle></circle>
</circle>

相反，有很多选项，其中一个选项是在g后面加上初始输入，然后在其上加上一个圆两次：

var svg = d3.select('svg');

var dataSet = [10, 20, 30, 40];

var g = svg.selectAll('g')
    .data(dataSet)
    .enter()
    .append('g');
    
var upper = g.append("circle").attr({
        r:function(d){ return d },
        cx:function(d, i){ return i * 100 + 50 },
        cy:50,
        fill: 'red'
    });
    
var lower = g.append('circle')
    .attr({
        r:function(d){ return d },
        cx:function(d, i){ return i * 100 + 50 },
        cy:150, // to fit better.
        fill: 'lime'
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="400" width="500"></svg>

或者您可以进行两次输入，每行一圈：

var svg = d3.select('svg');

var dataSet = [10, 20, 30, 40];

var upper = svg.selectAll("circle")
    .data(dataSet)
    .enter()
    .append("circle")
    .attr({
        r:function(d){ return d },
        cx:function(d, i){ return i * 100 + 50 },
        cy:50,
        fill: 'red'
    });
    
var lower = svg.selectAll(null) // don't select the existing circles
    .data(dataSet)
    .enter()
    .append("circle")
    .attr({
        r:function(d){ return d },
        cx:function(d, i){ return i * 100 + 50 },
        cy:150, // to fit better.
        fill: 'lime'
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="400" width="500"></svg>

如果数据数组中的每个项目由基于该数据数组项目（基准）的两个成对的圆表示，则第一个是理想的。如果成对的圆之间的数据可能不同（您可能有两个数据数组），则第二个是理想的。

当然还有其他方法，例如，您可以使用两次Enter选择的占位符（var enter = d3.selectAll().data(data).enter()），或为D3创建同级方法，但是上述两个选项可以正常工作。

如何绘制双圆？

1 个答案: