雙圓怎么畫？

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 創建一個兄弟方法，但以上兩個選項會正常工作。