Question

我正在研究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>

Answer 2

你无法看到最后一个圆圈，因为它位于图像之外。

d3 js运行不佳

2 个答案: