D3.jsでトランジションを作成することを学ぶエラーSvgの高さとYを取得するNAN

Question

ランダムな値を持つ通常のバー文字を作成しました のようなエラーを取得してトランジションを追加したときに問題が発生しました1. y = "NaN"の値が無効です 2.高さ属性= "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への移行を与えているので、間違っています。 ここでmyChartはSVGです。

次のように、長方形または棒で同じことを行う必要があります。

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

作業コード、それが働いたhere