Поиск среднего значения баров в гистограмме - d3

Я новичок в d3 и пытаюсь нарисовать среднюю линию через все столбцы на гистограмме, но не совсем в состоянии достичь этого. Ниже мой код:Поиск среднего значения баров в гистограмме - d3

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<style> 

body { 
    font: 10px sans-serif; 
} 

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

.bar { 
    fill: steelblue; 
} 

.x.axis path { 
    display: none; 
} 

.line { 
    fill: none; 
    stroke: #444; 
    stroke-width: 1.5px; 
} 


</style> 
</head> 
<body> 

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
<script> 
var data=[ 
{"letter": "BU", "higher": .08,"lower": .05}, 
{"letter": "AU", "higher": .05,"lower": .03}, 
{"letter": "LA", "higher": .04,"lower": .02} 

] 

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var formatPercent = d3.format(".0%"); 

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

var x2 = d3.scale.ordinal() 
    .rangeBands([0, width], 0); 


var y = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickFormat(formatPercent); 

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


    data.forEach(function(d) { 
    d.higher = +d.higher; 
    d.lower = +d.lower; 
    }); 


    x.domain(data.map(function(d) { return d.letter; })); 
    x2.domain(data.map(function(d) { return d.letter; })); 
    y.domain([0, d3.max(data, function(d) { return d.higher; })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Frequency"); 

    svg.selectAll(".bar") 
     .data(data) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.letter); }) 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { return y(d.higher); }) 
     .attr("height", function(d) { return height - y(d.higher-d.lower); }); 

var dataSum = d3.mean(data, function(d) { return (d.higher + d.lower); }); 


var line = d3.svg.line() 
    .x(function(d, i) { 
     return x(d.letter) + i; }) 
    .y(function(d, i) { return y(dataSum/data.length); }); 
    svg.append("path") 
     .datum(data) 
     .attr("class", "line") 
     .attr("d", line); 


</script> 
</body> 
</html>

Соответствующий код здесь «http://jsbin.com/beyakumohi/1/edit?html». Линия должна проходить через центр каждого бара, но это происходит только для 3-го бара, и это тоже не пересекает его. Есть ли ошибка в моем коде.

источник

2016-03-11 Anonymous

d3.mean даст вам среднее значение полного массива. Значение, что в этом случае вы получите среднее:

data[0].higher + data[0].lower + data[1].higher + data[1].lower + data[2].higher + data[2].lower

В этом случае я бы сказал, это больше наши правила, чтобы изменить функцию строки следующим образом

var line = d3.svg.line() 
    .x(function(d, i) { 
     return x(d.letter); }) 
    .y(function(d, i) { return y((d.higher + d.lower)/2); });

источник

2016-03-11 10:41:50

Спасибо, что работали. Но мне интересно, почему он не пересекает 3-й бар. Думаю, он нашел последний пункт, поэтому линия заканчивается, но есть ли способ сделать его доступным к правой стороне 3-го бара. См. Эту ссылку 'http://jsbin.com/bicinirawa/edit?html'. –

Я вижу .. Это вызвано функцией шкалы x, возвращающей левую сторону, где должны начинаться бары. Изменение х Funtion функции линии, чтобы .x (функции (D, I) { возврата х (d.letter) + 0,5 * x.rangeBand();}) должен работать –

Ну это также перемещает начальную point на 0,5 * x.rangeBand() –

Поиск среднего значения баров в гистограмме - d3

ответ

Смежные вопросы