javascript - SVG和d3:在数据坐标中绘制基本矩形吗？

我正在尝试学习d3以建立可视化；作为该项目的一部分，我发现需要绘制一些填充的矩形。这在SVG坐标中应该很简单，但是我想绘制数据坐标。我无法弄清楚为什么会在画布外绘制任何矩形，但这就是我在以下最小（非）工作示例中观察到的内容：https://bl.ocks.org/emprice/faed364cb1bc4cc1b0dcf8a5a2d50dac。

粉红色的矩形实际上超出了SVG元素的边界，如果我正确设置了x映射和y映射，则没有意义。是否有一个技巧可以绘制我未使用过的数据坐标，或者我是否正确配置了比例尺？我尝试更改y比例参数（范围和域），但没有成功；以相同的方式设置的x刻度似乎可以正常工作。

在此先感谢您的帮助。

最佳答案

在这个答案中，我不会解决other answer中涉及的坐标问题，但会给您两个重要的建议：


不要将jQuery和D3混合使用：不仅这是不必要的，而且有时还会使事情中断。只需摆脱该jQuery代码即可。
不要使用循环来绑定数据：请使用D3惯用数据绑定。


关于第2点，由于您的数据是对象，而data方法不接受对象，因此我们将其转换为数组...

var dataArray = [];

for (var key in data) {
    dataArray.push({
        category: key,
        y1: data[key][0].y1,
        y0: data[key][0].y0,
        x1: data[key][0].x1,
        x0: data[key][0].x0,
    })
}

...我们可以用来惯用地绑定数据：

g.selectAll(null)
    .data(dataArray)
    .enter()
    .append("rect")

这是您所做的更改的代码：

<script src="https://d3js.org/d3.v4.min.js">
</script>
<script type="text/javascript">
  var data = {
    "cat1": [{
      "y1": 1.581699235490658,
      "y0": 0.8124126240209036,
      "x0": 0.0003786444528587656,
      "x1": 0.23513820522529344
    }],
    "cat2": [{
      "y1": 1.438932516124979,
      "y0": 0.7292493003174502,
      "x0": 0.0003786444528587656,
      "x1": 0.3029155622870125
    }, {
      "y1": 0.816326356719349,
      "y0": 0.7577181178689592,
      "x0": 0.471790988262022,
      "x1": 1.0
    }],
    "cat3": [{
      "y1": 1.04308128481062,
      "y0": 0.5216497481615152,
      "x0": 0.0,
      "x1": 0.3029155622870125
    }, {
      "y1": 1.2796737272400311,
      "y0": 0.5443780228140943,
      "x0": 0.471790988262022,
      "x1": 1.0
    }],
    "cat4": [{
      "y1": 0.8577183187799378,
      "y0": 0.5507803277857598,
      "x0": 0.44377129875047333,
      "x1": 0.4714123438091632
    }],
    "cat5": [{
      "y1": 1.411106314679798,
      "y0": 0.6447611230842676,
      "x0": 0.3032942067398713,
      "x1": 0.4714123438091632
    }],
    "cat6": [{
      "y1": 0.9875866563383724,
      "y0": 0.5832528539336078,
      "x0": 0.2355168496781522,
      "x1": 1.0
    }],
    "cat7": [{
      "y1": 1.2362146708036688,
      "y0": 0.2743087520017313,
      "x0": 0.3032942067398713,
      "x1": 0.44339265429761454
    }]
  };

  var dataArray = [];

  for (var key in data) {
    dataArray.push({
      category: key,
      y1: data[key][0].y1,
      y0: data[key][0].y0,
      x1: data[key][0].x1,
      x0: data[key][0].x0,
    })
  }

  // define the dimensions of the graph pane
  var margin = {
    top: 30,
    right: 30,
    bottom: 30,
    left: 30
  };
  var width = 400 - margin.left - margin.right;
  var height = 200 - margin.top - margin.bottom;

  // define the scale
  var x = d3.scaleLinear().rangeRound([0, width]).domain([0., 1.]);
  var y = d3.scaleLinear().rangeRound([0, height]).domain([0., 2.]);
  var z = d3.scaleOrdinal(d3.schemeCategory10);

  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  g.selectAll(null).data(dataArray).enter()
    .append("rect")
    .attr("x", function(d) {
      return x(d.x0);
    })
    .attr("y", function(d) {
      return y(d.y0);
    })
    .attr("width", function(d) {
      return x(d.x1) - x(d.x0);
    })
    .attr("height", function(d) {
      return y(d.y1) - y(d.y0);
    })
    .attr("fill", function(d) {
      return z(d.category);
    });

</script>