在d3.js中某个范围的平均值(或中位数)处绘制网格线 [英] Draw gridlines at the average (or median) values of a range in d3.js

问题描述

我可以使用以下方法在图表中的数据中心点绘制网格线:

I'm able to draw gridlines at the center point of my data in my chart using something like this:

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.这是水平线的正确值，而不是垂直线的正确值.

However, what I want are lines at the mean (and/or median depending on the case) value of the range of data. I tried this, but the line is the the same place as the code above yields. Below is my full code that I'm trying to draw the lines at the mean of the x and y data ranges. I think the problem is how I'm defining the variable x and y, but I'm not sure how to adjust them. What happens is that both lines are drawn at 44 (44 on the x axis vertically and 44 on the y axis horizontally). However, the mean of the datasets aren't both 44. This is the correct value for the horizontal line, but not the vertical line.

发现问题是我得到的平均值是轴线上的值的平均值，这与我的数据集的平均值不同.不确定如何对此进行调整.

Figured out that the issue is that the mean that I'm getting is the mean of the values on the axis line, which isn't the same as the mean of my data set. Not sure how to adjust for this though.

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")

任何建议都会有所帮助.谢谢.

Any suggestions would be helpful. Thanks.

根据建议，我现在有一个不同的评估者，但是线条根本没有画出来.这是更新的代码:

As suggested, I have a different assessor now, but the lines simply aren't drawing. Here's the updated code:

 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变量中替换值，如下所示，则结果相同.

There are no errors for this, but the lines don't draw at all. If I substitute values in my lines variable, like below, the same result.

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

这告诉我这件作品有问题，但我不知道这是什么.

This suggests to me that there's a problem with this piece, but I have no idea what it is.

推荐答案

您将要根据您的数据而不是比例尺来计算平均值和中位数:

You'll want to calculate the mean and median based on your data, instead of your scale:

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

这些是通用的访问器函数，如果您需要有关访问器函数的特定指导(function(d) { return d.xVal; }部分)，则需要提供输入数据集的格式

These are generic accessor functions, if you need specific guidance on the accessor function (the function(d) { return d.xVal; } part), you'll need to provide the format of your input dataset

这篇关于在d3.js中某个范围的平均值(或中位数)处绘制网格线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！