Question

所以我是Javascript的新手，我正在尝试使用d3.js创建直方图。我一直在关注d3中之前创建的直方图的教程和示例，但无法弄清楚如何使我的矩形出现。

我的直方图目前包含4个箱子，每个箱子中的数字1,2,3和4表示我的数据集中每个数据点的颜色属性。当我在.attr“x”函数中执行console.log（d）时，它将显示为一种具有4个不同索引的数组，每个索引都包含具有该特定颜色的数据集中的数据点总数。现在我试图将“数组”变成矩形但我的宽度和高度函数不正确。如果有人可以解释d.dx和d.y做什么，为什么他们错了会有所帮助。我使用d3.v3.min.js作为我的脚本src值

d3.csv("data.csv", function(data) {

    var map = data.map(function (i) { return parseInt(i.color); })
    var histogram = d3.layout.histogram()
    .bins(4)(map)
    var canvas = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500);

    var bars = canvas.selectAll(".bar")
    .data(histogram)
    .enter()
    .append("g")

    bars.append("rect")

        .attr("x", function (d) 
        { 
            //console.log(d)
            return d.x * 5; })
        .attr("y", 0)
        .attr("width",function(d) { return d.dx; })
        .attr("height", function(d) { d.y; })
        .attr("fill", "steelblue");


});

Answer 1

我updated your plunk如下。

bars.append("rect")
        .attr("x", function(d) { return d.x*100; })        
        .attr("y", 50)
        .attr("height", function(d) { return d.y * 10;})
        .attr("width", function(d) { return d.dx*50;})

        .attr("fill", "steelblue")

        .on("mouseout", function() 
            {

                d3.select(this)
                .attr("fill", "steelblue");
        })
        .on("mouseover", function() 
            {

                d3.select(this)
                .attr("fill", "orange");
        });

您的代码似乎工作正常，只有您的元素重叠（同样，d3 v4被引用而不是v3）。我做的是：

将d.x乘以50以空格元素
将d.dx乘以50以减少重叠

关于你以前的问题：

d.x对应于bin的范围，在您的情况下为0.75（4个范围在1到4之间，使得0.75：1+（0.75 * 4）= 4） * d.y对应于＆＃39;身高＆＃39;箱子的数量，即元素的数量。

D3.js尝试使用直方图布局绘制矩形

1 个答案: