D3条形图和HTML数据属性

我有一个D3可缩放条形图，这是在给图表传递的当前数据：D3条形图和HTML数据属性

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>

我想要从“数据日期”和“数据值”中获取日期和值。我需要对“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/

任何帮助将非常感激。

来源

2016-08-21 user3837019

你想从这些'div'解析数据吗？或者用那些'div'来代表酒吧？我很困惑... – Mark

对此感到抱歉。我想解析这些div的数据。所以我想用jquery来获取它们的日期和值。如果这有道理？ – user3837019

所以我想用jquery获取它们的日期和值吧。例如，目前我使用“data = []”创建条形图。我想要做的是使用div创建栏。我希望这是有道理的。 – user3837019

无需jquery，d3有它涵盖了：

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

更新fiddle。

来源

2016-08-22 00:16:29 Mark

D3条形图和HTML数据属性

回答

相关问题