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，因此上述错误。此处myChart是SVG。

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

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

工作代码here

学习在D3.js中创建过渡获得错误Svg高度＆amp; Y是NAN

1 个答案: