lernen, Übergang in D3.js zu erstellen Fehler Svg Height & Y ist NAN

Question

erstellt eine regelmäßige Bar Char mit zufälligen Werten Mein Problem ist, wenn ich Übergang Fehler wie 1.Invalid Wert für Attribut y = "NaN" 2. Ungültiger Wert für Attributshöhe = "NaN" Kann jemand mir helfen, diesen Dank im Voraus zu korrigieren.

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

Statt

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

Die oben zu tun, ist falsch, da Sie Übergang zu svg geben. Hier myChart ist die SVG.

Sie sollten das gleiche für das Rechteck oder die Balken tun, wie unten gezeigt.

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

Arbeits Code here