d3 bar chart переход из csv

Question

Я начинаю d3, пытаюсь создать простую двухстрочную гистограмму, которая переходит при нажатии различных кнопок. Оригинальная диаграмма построена:

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

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

var x1 = d3.scale.ordinal(); 

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

var color = d3.scale.ordinal() 
    .range(["#d4d4d4", "#58bd5b",]); 

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

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

var svg = d3.select("div.d3space").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.csv("/assets/data/data3.csv", function(error, data) { 
var hourBuckets = d3.keys(data[0]).filter(function(key) { return key !== "Client"; }); 

data.forEach(function(d) { 
d.hours = hourBuckets.map(function(name) { return {name: name, value: +d[name]}; }); 
}); 

x0.domain(data.map(function(d) { return d.Client; })); 
x1.domain(hourBuckets).rangeRoundBands([0, x0.rangeBand()]); 
y.domain([0, d3.max(data, function(d) { return d3.max(d.hours, function(d) { return d.value; }); })]); 

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

var client = svg.selectAll(".client") 
.data(data) 
.enter().append("g") 
.attr("class", "g") 
.attr("transform", function(d) { return "translate(" + x0(d.Client) + ",0)"; }); 

client.selectAll("rect") 
.data(function(d) { return d.hours; }) 
.enter().append("rect") 
.attr("width", x1.rangeBand()) 
.attr("x", function(d) { return x1(d.name); }) 
.attr("y", function(d) { return y(d.value); }) 
.attr("height", function(d) { return height - y(d.value); }) 
.style("fill", function(d) { return color(d.name); }); 

var legend = svg.selectAll(".legend") 
.data(hourBuckets.slice().reverse()) 
.enter().append("g") 
.attr("class", "legend") 
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

legend.append("rect") 
.attr("x", width - 18) 
.attr("width", 18) 
.attr("height", 18) 
.style("fill", color); 

legend.append("text") 
.attr("x", width - 24) 
.attr("y", 9) 
.attr("dy", ".35em") 
.style("text-anchor", "end") 
.text(function(d) { return d; }); 

}); 

CSV осуществляется доступ в следующем формате:

Client,Planned,Actual 
ICC,25,50 
RNR,50,47.5 
MB,10,2.5 

Эта диаграмма делает по желанию. Часть, с которой я борюсь, получает этот график для перехода к отражению разных данных при нажатии ссылки (ссылка имеет id = «четыре недели»). Я пробовал эту функцию onclick:

window.onload = function() { 
var a = document.getElementById("fourweeks"); 
var b = document.getElementById("eightweeks"); 
var c = document.getElementById("twelveweeks"); 

a.onclick = function() { 

    d3.csv("/assets/data/data1.csv", function(error, data) { 
     var hourBuckets = d3.keys(data[0]).filter(function(key) { return key !== "Client"; }); 

     data.forEach(function(d) { 
     d.hours = hourBuckets.map(function(name) { return {name: name, value: +d[name]}; }); 
     }); 

     var client = svg.selectAll(".client") 

     client.selectAll("rect") 
     .data(function(d) { return d.hours; }) 
     .transition() 
     .duration(1000) 
     .attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }) 

}); 
} 
} 

... нет кости. Я могу заставить это работать при создании/переходе простых линейных диаграмм одной серии, которые используют входы списка, но не для нескольких серий csv. data2.csv - это тот же самый файл, что и data1.csv, с небольшими значениями.

Спасибо за ваше время за чтение - любой совет?

Answer 1

Первый svg.selectAll(".client") возвращает пустой выбор, потому что вы дали этим элементам класс 'g' вместо 'client'.

Во-вторых вам необходимо обновить данные о .client-элементов:

var client = svg.selectAll(".client") 
.data(data); 

кстати. вы должны использовать selection.classed() вместо selection.attr ('class')