Question

我可以使用以下内容在我的图表中的数据中心点绘制网格线：

startX = d3.min(x.domain()),
endX = d3.max(x.domain()),
startY = d3.min(y.domain()),
endY = d3.max(y.domain());
lines = [{x1: startX, x2: endX, y1: (startY + endY)/2, y2: (startY + endY)/2},
            {x1: (startX + endX)/2, x2: (startX + endX)/2, y1: startY, y2: endY}]

然后渲染线条。

然而，我想要的是数据范围的平均值（和/或取决于具体情况的中值）的线。我尝试过这个，但是该行与上面的代码产生的位置相同。下面是我的完整代码，我试图以x和y数据范围的平均值绘制线条。我认为问题在于我如何定义变量x和y，但我不确定如何调整它们。会发生的是两条线都是在44处绘制的（x轴垂直44，水平y轴44）。但是，数据集的平均值都不是44.这是水平线的正确值，而不是垂直线。

编辑：弄清楚问题在于我得到的平均值是轴线上的值的平均值，它与我的数据集的平均值不同。不知道怎么调整这个。

var margin = {t:30, r:20, b:20, l:40 },
w = 1000 - margin.l - margin.r,
h = 600 - margin.t - margin.b,
x = d3.scale.linear()
.range([0, w])

y = d3.scale.linear()
.range([h - 60, 0])

color = d3.scale.category10();

 var svg = d3.select("#chart").append("svg")
.attr("width", w + margin.l + margin.r)
.attr("height", h + margin.t + margin.b);
 fig = svg.append("g").attr("transform", "translate(40, 20)");


 var xAxis = d3.svg.axis()
.scale(x)
.ticks(20)
.tickSubdivide(true)
.tickSize(6, 3, 0)

.orient("bottom");


 var yAxis = d3.svg.axis()
.scale(y)
.ticks(20)
.tickSubdivide(true)
.tickSize(6, 3, 0)
.orient("left");

 ymean = d3.mean(y.domain()); 
 xmean = d3.mean(x.domain()); 
 lines = [{x1: startX, x2: endX, y1: ymean, y2: ymean},//horizontal
        {x1: xmean, x2:xmean, y1: startY, y2: endY}] //vertical

fig.selectAll(".grid-line")
.data(lines).enter()
.append("line")
.attr("x1", function(d){ return x(d.x1); })
.attr("x2", function(d){ return x(d.x2); })
.attr("y1", function(d){ return y(d.y1); })
.attr("y2", function(d){ return y(d.y2); })
.style("stroke", "#000")

任何建议都会有所帮助。感谢。

编辑：正如所建议的那样，我现在有一个不同的评估员，但这些线条根本就没有绘制。这是更新后的代码：

 ymean = d3.mean(data, function(d) { return d.incidence; }); 
  xmean = d3.mean(data, function(d) { return d.variance; }); 


        lines = [{x1: startX, x2: endX, y1: ymean, y2: ymean},
                 {x1: xmean, x2:xmean, y1: startY, y2: endY}]

fig.selectAll(".grid-line")
.data(lines).enter()
.append("line")
.attr("x1", function(d){ return x(d.x1); })
.attr("x2", function(d){ return x(d.x2); })
.attr("y1", function(d){ return y(d.y1); })
.attr("y2", function(d){ return y(d.y2); })
.style("stroke", "#000")

这没有错误，但线条根本没有画出来。如果我在我的lines变量中替换值，如下所示，则会得到相同的结果。

lines = [{x1: startX, x2: endX, y1: 50, y2: 50},
{x1: xmean, x2:xmean, y1: startY, y2: endY}]

这告诉我这件作品存在问题，但我不知道它是什么。

Answer 1

您希望根据数据计算平均值和中位数，而不是根据您的比例计算：

ymean = d3.mean(inputData, function(d) { return d.xVal; }); 
xmean = d3.mean(inputData, function(d) { return d.yVal; });

这些是通用访问器功能，如果您需要有关访问者功能的具体指导（function(d) { return d.xVal; }部分），您需要提供输入数据集的格式

以d3.js中的范围的平均值（或中值）绘制网格线

1 个答案: