0

我是 d3.js 的新手，一般来说仍然是 javascript 的初学者。我已经让 d3 基于数组中的单个值正确绘制了单个 SVG 矩形。当我通过输入字段增加区域中数字的值，然后调用 reDraw 函数时，矩形会在一秒钟内更改为新大小，然后切换回初始大小。我想我一定有一个范围界定问题，但无法弄清楚。有任何想法吗？

var dataset, h, reDraw, svg, w;

w = 300;

h = 400;

dataset = [1000];

// Create SVG element
svg = d3.select("#left").append("svg").attr("width", w).attr("height", h);

// set size and position of bar
svg.selectAll("rect").data(dataset).enter().append("rect").attr("x", 120).attr("y", function(d) {
  return h - (d / 26) - 2;
}).attr("width", 60).attr("height", function(d) {
  return d / 26;
}).attr("fill", "rgb(3, 100, 0)");

// set size and position of text on bar
svg.selectAll("text").data(dataset).enter().append("text").text(function(d) {
  return "$" + d;
}).attr("text-anchor", "middle").attr("x", 150).attr("y", function(d) {
  return h - (d / 26) + 14;
}).attr("font-family", "sans-serif").attr("font-size", "12px").attr("fill", "white");

// grab the value from the input, add to existing value of dataset
$("#submitbtn").click(function() {
  localStorage.setItem("donationTotal", Number(localStorage.getItem("donationTotal")) + Number($("#donation").val()));
  dataset.shift();
  dataset.push(localStorage.getItem("donationTotal"));
  return reDraw();
});

// redraw the rectangle to new size
reDraw = function() {
  return svg.selectAll("rect").data(dataset).attr("y", function(d) {
    return h - (d / 26) - 2;
  }).attr("height", function(d) {
    return d / 26;
  });
};
4

1 回答 1

1

您需要告诉 d3 如何将新数据与reDraw函数中的现有数据进行匹配。也就是说，您选择了所有矩形，reDraw然后将数据绑定到它，而不告诉它新旧之间的关系。因此，在调用 之后data()，当前选择（您正在操作的选择）应该是空的（不确定为什么会发生某些事情），而enter()选择包含新数据，而选择包含旧数据exit()。

您有多种选择来完成这项工作。您可以在当前设置中对enter()和exit()选项进行操作，即删除旧的并添加新的，或者重组您的数据以便能够匹配新旧数据。例如，您可以使用具有适当属性的对象而不是单个数字。后者的优点是您可以添加从旧尺寸到新尺寸的过渡。

查看本教程以获取有关数据连接的更多信息。

编辑：

事实证明这实际上不是问题，请参阅评论。

于 2012-11-13T09:22:21.450 回答