Question

我正在探索D3.js.我主要使用他们的tutorial来获得我拥有的东西。但我做了一些调整。我正在做的是计算活动和放大的数量。特定表中的非活动项。然后它会显示包含这些值的图表。大多数都是罚款。我有2个问题：

删除项目时，我的AJAX调用不会自动更新。仅在添加项目时更新。但我对这篇文章并不关心。
我的主要问题：重复值不会被视为单个数字。相反，它会看到[10,10]并将其作为10中的单个条输出（而不是2条）。

看看D3文档，似乎问题在于.data。文档提到它加入数据。

$(document).on("DOMSubtreeModified DOMNodeRemoved", ".newsfeed", function() {
    var columns = ['created','deleted'];
    var data = [numN, numD];
    var y = d3.scale.linear()
            .domain([0, d3.max(data)])
            .range([0, 420]);
    var x = d3.scale.ordinal()
            .domain(columns)
            .rangeBands([0, 120]);
    chart.selectAll("rect")
            .data(data)
 //.enter().append("rect")
            .attr("x", x)
            .attr("height", y)
            .attr("width", x.rangeBand())
            .attr("rx", 10)
            .attr("ry", 10);
    chart.selectAll("text")
            .data(data)
 //.enter().append("text")
            .attr("y", y)
            .attr("x", function(d) {
        return x(d) + x.rangeBand() / 2;
    }) //offset
            .attr("dy", -10) // padding-right
            .attr("dx", ".35em") // vertical-align: middle
            .attr("text-anchor", "end") // text-align: right
            .text(String);
});

如何显示每个值？如果我传入两个不同的值，则图表会按原样显示。

Answer 1

您的问题发生在.attr("x", x)。因此，您执行此操作的方式会为x分配相同的rect坐标。

所以尝试抵消x坐标。

.attr("x", function(d, i) { x + i * width_of_your_rect); })

D3.js忽略重复值

1 个答案: