Question

编辑：感谢现在我的排行榜下面的musically_um＆＃34;刷新＆＃34;但结果是酒吧悬停在xaxis上方/下方。见下图：

PAGE LOAD： PAGE LOAD all OK

来自ACT的客户John Doe，图表更改为： enter image description here

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

在任何地方更新图表时，您都没有更新选择的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);

Answer 2

在布局问题上，从图片看起来你正在更新条形的高度，而不是它们的y位置。由于SVG rect的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);
});

D3.js条形图不令人耳目一新

2 个答案: