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

所以我对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");


});

我的发言如下

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");
        });

您的代码似乎工作正常，只是元素重叠（而且引用的是D3V4而不是v3）。我所做的是：

• 将

  d.x

  乘以50，将元素隔开
• 将

  d.dx

  乘以50以减少重叠

关于你以前的问题：

• d、 x对应于箱子的范围，在您的例子中为0.75（4个范围在1和4之间，使0.75:1+（0.75*4）=4） *d、 y对应于垃圾箱的“高度”，即元素的数量

---

您是否可以用plnkr或其他格式的数据建立您的示例？现在很难理解这个问题，因为您的代码似乎还可以。你可以找到compelet doucmentation关于直方图的内容。@Huguesstevanski我不确定如何使用plnkr，但我已经创建了这段代码，似乎什么都没有显示。由于plnkr没有控制台，您将无法看到哪个console.log（d）输出到控制台。使用chrome的控制台，这就是console.log（d）的输出。每个数组值都有自己的x、dx、length和y值，我正试图根据这些值绘制矩形