学习在 D3 中创建过渡.js得到错误 svg 高度和 y 是 NAN

Question

创建了一个具有随机值的规则条形字符我的问题是当我添加转换时出现错误1.属性y="NaN"的值无效2.属性height="NaN"的值无效有人能帮我纠正吗？提前谢谢。

var dataset = []; //Initialize empty array
for (var i = 0; i < 15; i++) { //Loop 25 times
    var newNumber = Math.round(Math.random() * 500); //New random number (0-55)
    dataset.push(newNumber); //Add new number to array
}
var h = 500;
var w = 500;
//var barWidth = 35;
//var barOffSet = 5;
//create tooltip
var toolTip = d3.select("body").append("div").
    style("position", "absolute").
    style("background", "#f4f4f4").
    style("padding", "5 15px").
    style("border", "1px #333 solid").
    style("border-radius", "5px").
    style("opacity", "0");
//create scale
var yScale = d3.scale.linear().
    domain([0, d3.max(dataset)]).
    range([0, h]);
var xScale = d3.scale.ordinal().
    domain(d3.range(0, dataset.length)).
    rangeBands([0, w]);
var colorScale = d3.scale.linear().
    domain([0, dataset.length]).
    range(["#90ee90", "#30c230"]);
//create svg element
var myChart = d3.select("#chart").
    append("svg").
    attr("height", h).
    attr("width", w).
    style("background", "#f4f4f4");
//bind data
var rects = myChart.
    selectAll("rect").
    data(dataset);
//enter data
rects.
    enter().
    append("rect");
//update data
rects.
    style("fill", function (d, i) {
        return (colorScale(i));
    }).
    attr("width", xScale.rangeBand()).
    attr("height", 0).
    attr("x", function (d, i) {
        return xScale(i);
    }).
    attr("y", h);
//exit data
rects.
    exit().
    remove();
//create events
rects.on("mouseover", function (d) {
    toolTip.transition().
        style("opacity", 1)
    toolTip.html(d).
        style("left", (d3.event.pageX + "px")).
        style("top", (d3.event.pageY + "px"))
    d3.select(this).style("opacity", 0.5)
});
rects.on("mouseout", function (d) {
    toolTip.transition().style("opacity", 0)
    d3.select(this).style("opacity", 1)
});
//transition
myChart.transition().
    attr("height", function (d) {
        return yScale(d);
    }).
    attr("y", function (d) {
        return(h-yScale(d));
    })

    <title>D3 Tutorial Demo</title>
    <h1>SVG Shapes</h1>
    <div id="chart"></div>

Fiddle Link

Answer 1

而不是进行

myChart.transition().
    attr("height", function (d) {
        return yScale(d);
    }).
    attr("y", function (d) {
        return(h-yScale(d));
    })

以上内容是错误的，因为您正在向svg进行转换。这里CCD_ 1是CCD_。

你应该在矩形或条形上做同样的事情，如下所示。

rects.transition().
    attr("height", function (d) {
        return yScale(d);
    }).
    attr("y", function (d) {
        return(h-yScale(d));
    })

此处的工作代码