javascript - 如何画双圆？

Question

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

我使用 D3 库及其 DOM 运算符(这很重要)。但屏幕仅显示第一个圆圈组。

JSFIDDLE

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>

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

当然还有其他方法，例如您可以使用两次输入选择的占位符 (var enter = d3.selectAll().data(data).enter())，或者创建一个D3 的 sibling 方法，但以上两个选项都可以正常工作。