D3.js 条形图不刷新答案

【问题标题】：D3.js bar charts not refreshingD3.js 条形图不刷新
【发布时间】：2013-12-23 05:22:18
【问题描述】：

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

页面加载：

点击 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:
    };
};

【问题讨论】：

标签： javascript d3.js bar-chart

【解决方案1】：

在任何地方更新图表时，您不会更新选择的data。试试这个：

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

【讨论】：

嗨，musically_ut。感谢您的建议。它现在正在过渡，但它正在破坏条形图布局。有关更多详细信息，请参阅我上面的编辑。我的页面在solarmonitoringaustralia.com.au/partner-portal 请从右边的手风琴中选择客户以查看转换。

【解决方案2】：

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

有趣的是，在您最初发布的代码中，您正在更新 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);
});

【讨论】：