D3棒グラフとHTMLデータは、私はD3ズーム可能な棒グラフを持って

Question

属性、これはチャートに渡されているの現在のデータです：

var data = [{"date":"2012-03-20","total":3},{"date":"2012-04-21","total":8},{"date":"2012-05-22","total":2},{"date":"2012-06-23","total":10}, 
{"date":"2012-07-24","total":3},{"date":"2012-08-25","total":20}, 
{"date":"2012-09-26","total":12},{"date":"2012-10-23","total":10}, 
{"date":"2012-11-24","total":3},{"date":"2012-12-25","total":20},{"date":"2012-12-26","total":12}]; 

私は何をしたいのかパスデータ属性れる：

を

<div class="test"> 
    <div class"red" data-name"bar1" data-date="2012-03-20" data-total="6"> 
    </div> 
    <div class="blue" data-name="bar2" data-date="2012-04-21" data-total="10"> 
</div> 

</div> 

日付と値を "data-date"と "data-value"から取得します。 "x"と "y"変数にどのような関連する変更を加える必要がありますか？

彼らは現在、とても似ています：

var x = d3.time.scale() 
    .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)]) 
    .rangeRound([0, width - margin.left - margin.right]); 

var y = d3.scale.linear() 
    .domain([0, d3.max(data, function(d) { return d.total+ (d.total/4); })]) 

完全なコードはここで見つけることができます：https://jsfiddle.net/noobiecode/wck4ur9d/49/

すべてのヘルプははるかに高く評価されるだろう。

Answer 1

jqueryの必要は、d3はそれがカバーしている：fiddleを更新しました

var data = []; 
d3.selectAll(".test>div") 
    .each(function() { 
    var self = d3.select(this); 
    data.push({ 
     date: self.attr("data-date"), 
     total: +self.attr("data-value") 
    }); 
    }); 

を。