Javascript D3.js条形图未刷新

编辑：感谢我的图表下方的音乐_um现在“刷新”，但结果是横轴上方/下方的横条悬停。见下图：

页面加载：

点击ACT的客户John Doe，图表将更改为：

页面加载的JSON数据如下，请参阅没有最大能量负数：

   [{"xaxis":"6","max_energy":"98.019","max_efficiency":"25.797"},{"xaxis":"7","max_energy":"82.073","max_efficiency":"21.596"},{"xaxis":"8","max_energy":"9.503","max_efficiency":"2.503"},{"xaxis":"9","max_energy":"17.502","max_efficiency":"4.603"},... more data ...]

ACT中John Doe的JSON数据也如下所示，请参见也没有max_能量负数：

[{"xaxis":"6","max_energy":"22.696","max_efficiency":"5.973"},{"xaxis":"7","max_energy":"23.250","max_efficiency":"6.118"},{"xaxis":"8","max_energy":"2.692","max_efficiency":"0.709"},{"xaxis":"9","max_energy":"4.958","max_efficiency":"1.304"},... more data ...]

为什么图表会如此令人耳目一新？页面可以找到。谢谢

---

原始问题：

5个图表在页面加载时加载OK，默认数据来自服务器端脚本上的MySQL

我在pge上有选择器，用户可以点击其中一个，新数据将加载到图表中。这件东西坏了

这是我的HTML

<svg id="daychart"></svg>
<svg id="weekchart"></svg>
<svg id="monthchart"></svg>
<svg id="yearchart"></svg>
<svg id="lifechart"></svg>
<div id="P100023" onclick="MenuSelect(this.id);">P100023</div>
<div id="C120036" onclick="MenuSelect(this.id);">C120036</div>
<div id="C120031" onclick="MenuSelect(this.id);">C120031</div>
<div id="C120048" onclick="MenuSelect(this.id);">C120048</div>
<div id="C120033" onclick="MenuSelect(this.id);">C120033</div>

---

在任何地方更新图形时，您都不会更新所选内容的

数据。试试这个：

   // Select the section we want to apply our changes to
    var svg = d3.select(divid)

    // Make the changes
    svg.selectAll(".bar") // change the bar
    .data(data)           // Update the data within.
                          // No `.enter()` and `.exit()` phase.
    .transition()
    .duration(750)
        .attr("x", function (d) {
        return x(d.xaxis);
    })
        .attr("y", function (d) {
        return y(d.max_energy);
    });

    svg.select(".x.axis") // change the x axis
    .transition()
    .duration(750)
        .call(xAxis);

    svg.select(".y.axis") // change the y axis
    .transition()
    .duration(750)
        .call(yAxis);

在布局问题上，从图片上看，您似乎正在更新条的高度，但不是它们的y位置。由于SVG矩形的y位置始终位于矩形的顶部，因此在更改数据时也需要更改它

有趣的是，在您最初发布的代码中，您正在更新y位置，而不是高度。我想是你改的吧？无论哪种方式，这都是您所需要的：

// Make the changes
svg.selectAll(".bar") // change the bar
.data(data) // Update the data within.
// No `.enter()` and `.exit()` phase.
.transition()
    .duration(750)
    .attr("x", function (d) {
    return x(d.xaxis);
})
    .attr("y", function (d) {
    return y(d.max_energy);
})
    .attr("height", function (d) {
    return height - y(d.max_energy);
});

嗨，音乐方面。谢谢你的建议。它现在正在转换，但它正在破坏条形图的布局。有关更多详细信息，请参见上面的“我的编辑”。我的页面是在请选择客户从手风琴的右边看过渡。
// Make the changes
svg.selectAll(".bar") // change the bar
.data(data) // Update the data within.
// No `.enter()` and `.exit()` phase.
.transition()
    .duration(750)
    .attr("x", function (d) {
    return x(d.xaxis);
})
    .attr("y", function (d) {
    return y(d.max_energy);
})
    .attr("height", function (d) {
    return height - y(d.max_energy);
});