D3.js гистограмма Y-axis issue

Я создал диаграмму диаграммы на сетевом наборе данных. Мой набор данных содержит json-формат с различным трафиком клиентов. Каждый клиент имеет n количество записей, пока отображается гистограмма. Мы показываем максимальное значение трафика в этих n записях. Мой вопрос в том, что я хочу отображать суммирующее значение n записей трафика на бар для разных клиентов.D3.js гистограмма Y-axis issue

My bar.html: 
=========== 
<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.bartext { 
font: 10px sans-serif; 
} 

.axis { 
    font: 10px sans-serif; 
} 

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

.x.axis path { 
    display: none; 
} 

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

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

var color = d3.scale.ordinal() 
.range(["#B5094C", "#CC66CC", "#FDCA11", "#3DB40D","#F672A9"]); 

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

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") 
    .ticks(10, "Mega Bytes"); 

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

d3.json("traffic.json", type, function(error, data) { 
    if (error) throw error; 

    x.domain(data.map(function(d) { return d.client_ip; })); 
    y.domain([0, d3.max(data, function(d) { return d.total_traffic/1024; })]); 

svg.append("g").attr("class", "x axis").attr("transform", 
        "translate(0," + height + ")").call(xAxis).append("text") 
        .attr("x", 879).attr("y", 15) 
        .style("text-anchor", "bottom").text("Clients"); 

      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(
          "Mega Bytes"); 

      svg.selectAll("bar").data(data).enter().append("rect").style(
        "fill", function(d) { 
         return color(d.client_ip); 
        }).attr("class", "bar").attr("x", function(d) { 
       return x(d.client_ip); 
      }).attr("width", x.rangeBand()).attr("y", function(d) { 
       return y(d.total_traffic/1024); 
      }).attr("height", function(d) { 
       return height - y(d.total_traffic/1024); 
      }); 

    var yTextPadding = 20; 
svg.selectAll(".bartext") 
.data(data) 
.enter() 
.append("text") 
.attr("class", "bartext") 
.attr("text-anchor", "middle") 
.attr("dx", -3) // padding-right 
.attr("dy", ".35em") // vertical-align: middle 
.attr("text-anchor", "end") // 
.attr("fill", "black") 
.attr("x", function(d) { return x(d.client_ip)+130; }) 
    .attr("y", function(d) { return y(d.total_traffic/1024)-12;}) 
.text(function(d){ 
    return d.total_traffic/1024; 
}); 

}); 

function type(d) { 
    d.total_traffic = +d.total_traffic; 
    return d; 
} 

</script> 

My traffic.json file: 
====================== 
[ { "client_ip" : "1.128.148.243" , "timestamp" : "1341619346000" , "total_traffic" : 0} , { "client_ip" : "1.128.148.243" , "timestamp" : "1341619346039" , "total_traffic" : 1} , { "client_ip" : "1.128.148.243" , "timestamp" : "1341619346153" , "total_traffic" : 3} , { "client_ip" : "1.128.148.243" , "timestamp" : "1341619346175" , "total_traffic" : 4} , { "client_ip" : "92.168.4.53" , "timestamp" : "1341619346216" , "total_traffic" : 6} , { "client_ip" : "92.168.4.53" , "timestamp" : "1341619346219" , "total_traffic" : 7} , { "client_ip" : "92.168.4.53" , "timestamp" : "1341619346310" , "total_traffic" : 8} , { "client_ip" : "92.168.4.53" , "timestamp" : "1341619346320" , "total_traffic" : 10} , { "client_ip" : "192.168.7.23" , "timestamp" : "1341619346342" , "total_traffic" : 11} , { "client_ip" : "192.168.7.23" , "timestamp" : "1341619346372" , "total_traffic" : 13} , { "client_ip" : "192.168.7.23" , "timestamp" : "1341619346380" , "total_traffic" : 14} , { "client_ip" : "192.168.7.23" , "timestamp" : "1341619346392" , "total_traffic" : 16} , { "client_ip" : "98.53.1.76" , "timestamp" : "1341619346404" , "total_traffic" : 17} , { "client_ip" : "98.53.1.76" , "timestamp" : "1341619346415" , "total_traffic" : 19} , { "client_ip" : "98.53.1.76" , "timestamp" : "1341619346450" , "total_traffic" : 20} , { "client_ip" : "98.53.1.76" , "timestamp" : "1341619346462" , "total_traffic" : 22}]

Может кто-нибудь пожалуйста, предложить по этому вопросу ...

источник

2015-08-25 dev333

Вы можете использовать для каждого пользователя:

d.values.reduce(function(sum, d){ 
      return sum + d.amount; 
     },0)

Here's reduce documentation .-

источник

2015-08-25 12:39:47 Klaujesi

Можете ли вы объяснить, где я должен выполнять этот код. – dev333

D3.js гистограмма Y-axis issue

ответ

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