0

我刚刚开始使用 D3.js，并且在将条形水平排列时遇到了问题。目前，它们指向下方。

var jsonRectangles = [
  { "x_axis": 10,  "y_axis": 0, "height": 65,  "width":20, "color": "green" },
  { "x_axis": 40,  "y_axis": 0, "height": 80,  "width":20, "color": "purple" },
  { "x_axis": 70,  "y_axis": 0, "height": 100, "width":20, "color": "orange" },
  { "x_axis": 100, "y_axis": 0, "height": 50,  "width":20, "color": "brown" },
  { "x_axis": 130, "y_axis": 0, "height": 66,  "width":20, "color": "black" },
  { "x_axis": 160, "y_axis": 0, "height": 68,  "width":20, "color": "red" }];

var svgContainer = d3.select("body")
        .append("svg")
        .attr("width", 500)
        .attr("height", 100);

var rectangles = svgContainer.selectAll("rect")
        .data(jsonRectangles)
       .enter()
        .append("rect");

var rectangleAttributes = rectangles
        .attr("x", function (d) { return d.x_axis; })
        .attr("y", function (d) { return d.y_axis; })
        .attr("height", function(d) { return height - y(d.weight); })
        .attr("width", function (d) { return d.width; })
        .style("fill", function(d) { return d.color; });
4

2 回答 2

2

SVG 中的 (0,0) 坐标位于左上角，因此您的 y 坐标在从顶部开始计数的意义上是“反转的”。这意味着您必须定位条形，以便它们从您要显示的 y 位置开始并延伸到轴。您的代码应该看起来像这样。

rectangles.attr("y", function (d) { return (heightOfGraph - y(d.height)); })
          .attr("height", function(d) { return y(d.height); });

一般来说，您不需要保存rectangleAttributes在变量中 - 它与rectangles.

于 2013-04-17T09:29:13.487 回答
0

在 D3 中，y 坐标上的 0 位于顶部而不是底部。您需要先将条形向下移动到您希望 y 轴原点所在的位置，然后将条形向上移动它们的高度以正确定位它们。

这是一个粗略的解决方案，但希望您能够使用（请参阅已更改的位的评论）：

var jsonRectangles = [
  { "x_axis": 10, "y_axis": 0, "height": 65, "width":20, "color" : "green" },
  { "x_axis": 40, "y_axis": 0, "height": 80, "width":20, "color" : "purple" },
  { "x_axis": 70, "y_axis": 0, "height": 100, "width":20, "color" : "orange" },
  { "x_axis": 100, "y_axis": 0, "height": 50, "width":20, "color" : "brown" },
  { "x_axis": 130, "y_axis": 0, "height": 66, "width":20, "color" : "black" },
  { "x_axis": 160, "y_axis": 0, "height": 68, "width":20, "color" : "red" }];

// height of the visualisation - used to translate the bars
var viz_height = 100;

var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 500)
                                    // set using viz_height rather than a fixed number
                                    .attr("height", viz_height);

var rectangles = svgContainer.selectAll("rect")
                             .data(jsonRectangles)
                             .enter()
                             .append("rect");

var rectangleAttributes = rectangles
                          .attr("x", function (d) { return d.x_axis; })
                          // move the bars to the bottom of the chart (using
                          // viz_height), then move them back up by the height of
                          // the bar which moves them into palce
                          .attr("y", function (d) { return viz_height - y(d.height); })
                          .attr("height", function(d) { return y(d.height); })
                          .attr("width", function (d) { return d.width; })
                          .style("fill", function(d) { return d.color; });

在此处输入图像描述

于 2013-04-17T09:30:18.320 回答