javascript - D3.js 条形图不刷新

Question

编辑:感谢我的图表下方的 musically_um 现在“刷新”，但结果是条形图悬停在 x 轴上方/下方。见下图:

页面加载:

从 ACT 找到客户 John Doe，图表变为:

PAGE LOAD的JSON数据如下，看没有max_energy负数:

   [{"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_energy 负数:

[{"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 ...]

为什么图表刷新成这样？页面可以查到here if you have the time .谢谢!

---

原始问题:

5 个图表在页面加载时加载正常，默认数据从服务器端脚本上的 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>

这是我的 JS 代码:

jQuery(document).ready(function () {
    CreateBarChart("/myphp/data.php?var=PDAY&id=P100023", "#daychart");
    CreateBarChart("/myphp/data.php?var=PWEEK&id=P100023", "#weekchart");
    CreateBarChart("/myphp/data.php?var=PMONTH&id=P100023", "#monthchart");
    CreateBarChart("/myphp/data.php?var=PYEAR&id=P100023", "#yearchart");
    CreateBarChart("/myphp/data.php?var=PLIFE&id=P100023", "#lifechart");
});

function CreateBarChart(url, divid) {

    var margin = {
        top: 20,
        right: 0,
        bottom: 30,
        left: 30
    },
    width = 838 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10);

    var svg = d3.select(divid)
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.json(url, function (error, data) {
        data.forEach(function (d) {
            d.max_energy = +d.max_energy;
        });

        x.domain(data.map(function (d) {
            return d.xaxis;
        }));
        y.domain([0, d3.max(data, function (d) {
            return d.max_energy;
        })]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
            .attr("transform", "rotate(0)")
            .attr("y", 23)
            .attr("x", 340)
            .attr("dy", ".71em")
            .style("text-anchor", "bottom")
            .text("Time / Date / Month / Year");

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(0)")
            .attr("y", -15)
            .attr("x", -25)
            .attr("dy", ".71em")
            .style("text-anchor", "top")
            .text("Energy - KWh");

        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function (d) {
            return x(d.xaxis);
        })
            .attr("width", x.rangeBand())
            .attr("y", function (d) {
            return y(d.max_energy);
        })
            .transition().delay(function (d, i) {
            return i * 10;
        }).duration(10)
            .attr("height", function (d) {
            return height - y(d.max_energy);
        });

    });
};

function updateData(url, divid) {

    var margin = {
        top: 20,
        right: 0,
        bottom: 30,
        left: 30
    },
    width = 838 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10);

    // Get the data again
    d3.json(url, function (error, data) {
        data.forEach(function (d) {
            d.max_energy = +d.max_energy;
        });

        // Scale the range of the data again 
        x.domain(data.map(function (d) {
            return d.xaxis;
        }));
        y.domain([0, d3.max(data, function (d) {
            return d.max_energy;
        })]);

        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);
    });
}

function MenuSelect(divid) {

    switch (divid) {
        case "P100023":
            updateData("/myphp/data.php?var=PDAY&id=P100023", "#daychart");
            updateData("/myphp/data.php?var=PWEEK&id=P100023", "#weekchart");
            updateData("/myphp/data.php?var=PMONTH&id=P100023", "#monthchart");
            updateData("/myphp/data.php?var=PYEAR&id=P100023", "#yearchart");
            updateData("/myphp/data.php?var=PLIFE&id=P100023", "#lifechart");
            break;
        case "C120036":
            updateData("/myphp/data.php?var=CDAY&id=C120036", "#daychart");
            updateData("/myphp/data.php?var=CWEEK&id=C120036", "#weekchart");
            updateData("/myphp/data.php?var=CMONTH&id=C120036", "#monthchart");
            updateData("/myphp/data.php?var=CYEAR&id=C120036", "#yearchart");
            updateData("/myphp/data.php?var=CLIFE&id=C120036", "#lifechart");
            break;
        case "C120031":
            updateData("/myphp/data.php?var=CDAY&id=C120031", "#daychart");
            updateData("/myphp/data.php?var=CWEEK&id=C120031", "#weekchart");
            updateData("/myphp/data.php?var=CMONTH&id=C120031", "#monthchart");
            updateData("/myphp/data.php?var=CYEAR&id=C120031", "#yearchart");
            updateData("/myphp/data.php?var=CLIFE&id=C120031", "#lifechart");
            break;
        case "C120048":
            updateData("/myphp/data.php?var=CDAY&id=C120048", "#daychart");
            updateData("/myphp/data.php?var=CWEEK&id=C120048", "#weekchart");
            updateData("/myphp/data.php?var=CMONTH&id=C120048", "#monthchart");
            updateData("/myphp/data.php?var=CYEAR&id=C120048", "#yearchart");
            updateData("/myphp/data.php?var=CLIFE&id=C120048", "#lifechart");
            break;
        case "C120033":
            updateData("/myphp/data.php?var=CDAY&id=C120033", "#daychart");
            updateData("/myphp/data.php?var=CWEEK&id=C120033", "#weekchart");
            updateData("/myphp/data.php?var=CMONTH&id=C120033", "#monthchart");
            updateData("/myphp/data.php?var=CYEAR&id=C120033", "#yearchart");
            updateData("/myphp/data.php?var=CLIFE&id=C120033", "#lifechart");
            break;
        default:
    };
};

Answer 1

在任何地方更新图表时，您都没有更新选择的数据。试试这个:

   // 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);