javascript - D3 : Invalid attribute [object Object]

Question

我有一个具有以下结构的 JSON 列表:

[
    {'uid': 4, 'x': -1.2354657, 'y': -0.992893}
    {'uid': 26, 'x': 0.2783682, 'y': -0.1931}
    ...
    {'uid': 26, 'x': -0.278356, 'y': 0.082983}
]

我正在尝试附加 svg:circle svg 的元素在 x 指定的点处和y该列表中的值。 AJAX 请求工作正常，但我不断收到 Error: Invalid value for <circle> attribute cy="[object Object]" .

相关javascript代码:

var svg = d3.select('#d3')
        .append('svg')
        .append('g')
            .attr('class', 'main')

    ...

var x = d3.scale.linear()
        .domain(d3.extent(data, function (d) {return d.x;}))
        .range([0, width]);

var y = d3.scale.linear()
        .domain(d3.extent(data, function (d) {return d.y;}))
        .range([height, 0]);
    ...

 svg.selectAll('.bloom')
        .data(data)
    .enter()
    .append('g')
        .attr('class', 'bloom')
    .append('circle')
        .attr('class', 'bloom-circle')
        .attr('cx', function (d) {return x(d.x);})
        .attr('cy', function (d) {return y(d.y);})
        .attr('r', 10)
        .style('fill', 'purple')
        .style('stroke', 'white')
        .style('stroke-width', '5px');

我真的不知道发生了什么，因为 d3.scale.linear应始终返回 range 中的值。有谁知道为什么会发生这种情况吗？

Answer 1

当范围未明确指定时，秤将返回空对象。例如，以下两个比例在针对任何值调用时都将返回 {}:

d3.scale.linear.domain([0, 1]).range([0, undefined])
d3.scale.linear.domain([0, 1]).range([0, NaN])

因此，height 和 width 在执行时定义良好吗？