Question

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

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>

我希望从＆＃34; data-date＆＃34;中获取日期和值。和＆＃34;数据值＆＃34;。我需要对＆＃34; x＆＃34;进行哪些相关更改？和＆＃34; y＆＃34;变量

他们目前是这样的：

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已涵盖：

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。

D3条形图和html数据属性

1 个答案: