Question

我目前在缠绕我的头部时遇到一些麻烦，为什么＆＃39; rect＆＃39;的宽度属性？尽管变量传递给它更新，但不会更新。正如您所看到的，我正在尝试替换数组中的第一个属性＆＃39;数据＆＃39;输入的值，应该在draw（）函数中改变rect的宽度。（n）当记录在＆＃39;中时相应地更新。功能，但不会改变条的宽度...

这是我的代码：

HTML：

<p>
  <label for="nValue" style="display: inline-block; width: 240px; text-align: right"></label>
  <input id="nValue" max="100" min="0" step="10" type="number" value="0"></input>
</p>

<svg class = "chart"></svg>

CSS：

svg {
background-color: red;
position: absolute;
top: 10%;
left: 10%;
}

JS：

var data = [];

d3.select("#nValue").on("input", function() {
number(+this.value);
});

number(0);

function number(nValue) {
data[0] = nValue;
draw(nValue);
}

// graph is drawn here
function draw(n) {

var width = 300;
var barHeight = 10;

var chart = d3.select(".chart")
  .attr("width", width)
  .attr("height", barHeight * data.length);

var bar = chart.selectAll("g")
  .data(data)
.enter().append("g")
  .attr("transform", function(d, i) { 
    return "translate(0," + i * barHeight + ")";
  });

bar.append("rect")
  .attr("width", n)
  .attr("height", barHeight - 1);

console.log('n =' + n);
console.log('0 =' + data[0]);
}

由于

Answer 1

这是因为您将bar设置为enter()选项，该选项严格包含新添加的数据值。但是，当输入发生变化时，您不会添加新数据值，而只是更改现有值（data[0]）。第一次执行draw()后，bar将是一个空选择，因此添加矩形并设置其尺寸将无效。

D3 - 使用动态输入更新svg attr（）

1 个答案: