javascript - d3 js 运行不正常

Question

FIDDLE

我现在正在研究d3.js，发现了很神秘的东西。 数据集为[10,20,30,40](四) 但它只显示三个圆圈。

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'
    });

我看到了检查，里面有4个圆圈，很神秘。

谁来帮帮我!

Answer 1

为 svg 元素添加适当的宽度。目前，第四个圆不适合 svg。

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

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

var circle = svg
    .attr('width', 500) // <-- !!!
    .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'
    });

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