1

我正在探索 D3.js。我主要使用他们的教程来获得我所拥有的。但是我做了一些调整。我正在做的是计算特定表中活动和非活动项目的数量。然后它会显示一个包含这些值的图表。大多数情况下都可以正常工作。我有两个问题：

  1. 删除项目时，它不会通过我的 AJAX 调用自动更新。仅在添加项目时更新。但对于这篇文章，我并不担心这一点。
  2. 我的主要问题：重复值不被视为单独的数字。相反，它看到 [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);
});

如何使每个值显示？如果我传入两个不同的值，图表将按应有的方式显示。

4

1 回答 1

2

你的问题在.attr("x", x). 所以你这样做的方式为两个s分配了相同的x坐标。rect

所以尝试偏移x坐标。

.attr("x", function(d, i) { x + i * width_of_your_rect); })
于 2013-03-06T23:37:29.987 回答