Question

我有一个基本的折线图，其轴定义如下：

var x = d3.scale.linear().domain([300, 1600]).range([0, w]);
var y = d3.scale.linear().domain([100, 0]).range([0, h]);

var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.ticks(10);

var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(16);

现在我希望在折线图rect后面添加一个path线性渐变显示。我希望rect的高度为y轴上的全高，我希望宽度与300（x轴开始）和某个数字{{之间的图表宽度相匹配1}}在x轴上。

我不知道从哪里开始。东西告诉我，我需要让d3告诉我x轴上300和N之间的宽度（以像素为单位），并将其设置为N宽度，但我不知道如何获取该信息。我想要一个动态解决方案，这样我就可以使图表可扩展。

任何指向正确方向的人都会受到赞赏！

Answer 1

正确设置域名后，您只需要放置矩形即可。

例如，使用下面的代码（几乎完全是你的代码），让我们定位一个矩形，从300开始，以x为单位，然后变为1200，从y开始，以y为单位，然后变为40：

var myRectangle = svg.append("rect")
   .attr("x", x(300))
   .attr("y", y(40))
   .attr("width", x(1200) - x(300))
   .attr("height", y(10) - y(40))
   .attr("fill", "teal");

因此，要将矩形定位在x刻度的300处，我们只需要x(300)。要计算宽度，我们只需要一个减法：x(1200) - x(300)。

在y比例中，事情比较棘手，因为这里的y比例（注意我将你的y比例范围反转）是数学中的正常比例，底部为零。但在SVG坐标系中，零位于顶部，而不是底部。因此，原点为y(40)，但高度为y(10) - y(40)。

但是对于整个高度来说，数学更容易：

.attr("y", y(100))
.attr("height", y(0) - y(100))

检查摘录（高度是y轴的整个高度）：

var w = 400, h = 400;

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var x = d3.scale.linear().domain([300, 1600]).range([30, w - 20]);
var y = d3.scale.linear().domain([100, 0]).range([20, h - 20]);

var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.ticks(10);

var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(5);

var myRectangle = svg.append("rect")
  .attr("x", x(300))
  .attr("y", y(100))
  .attr("width", x(1200) - x(300))
  .attr("height", y(0) - y(100))
  .attr("fill", "teal");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (h - 20) + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(30,0)")
  .call(yAxis);

.axis path,
.axis line {
  fill: none;
  stroke: #aaa;
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

d3 - 在折线图x轴上获取两个数字之间的像素宽度（设置背景<rect>宽度）

1 个答案: