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

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

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

线性渐变显示。我希望

rect

的高度是y轴上的全高，并且我希望宽度与图表的宽度相匹配，介于300（x轴开始）和x轴上的某个数字

N

之间

我不知道从哪里开始。有些东西告诉我我需要得到d3来告诉我x轴上300到N之间的像素宽度，并将其设置为my

rect

width，但我不知道如何获得该信息。我想要一个动态的解决方案，这样我可以使图表具有可伸缩性

---

任何指向正确方向的指示都将受到赞赏

一旦正确设置了域，就可以定位矩形了

例如，使用下面的代码（几乎完全是您的代码），让我们定位一个矩形，从x比例的300开始到1200，从y比例的10开始到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.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var x=d3.scale.linear（）.域（[3001600]）.范围（[30，w-20]）；
变量y=d3.scale.linear（）.域（[100,0]）.范围（[20,h-20]）；
var yAxis=d3.svg.axis（）
.比例（y）
.orient（'左'）
.蜱（10）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（'底部'）
.蜱（5）；
var myRectangle=svg.append（“rect”）
.attr（“x”，x（300））
.attr（“y”，y（100））
.attr（“宽度”，x（1200）-x（300））
.attr（“高度”，y（0）-y（100））
.attr（“填充”、“teal”）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（h-20）+>）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“翻译（30,0）”）
.呼叫（yAxis）
。轴路径，
.轴线{
填充：无；
冲程：#aaa；
形状渲染：边缘清晰；
}