将$(this)传递给d3选择器

Question

我怎样才能将self $(this)参数传递给d3选择器？

http://jsfiddle.net/6q0vvsja/

function d3_bar(self, dataset, barPadding) {

   var w = parseInt(d3.select(".barChart").style("width"),10), // select(self)
       h = parseInt(d3.select(".barChart").style("height"),10); // select(self)

    var svg = d3.select(".barChart") // select(self)
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - (d * 4);
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d) {
            return d * 4;
        })
        .attr("fill", function(d) {
            return "rgb(0, 0, " + (d * 10) + ")";
        });

}

$('.barChart').each(function(i) { 

    var self = $(this),
        nums = self.data('value').split(',').map(Number);

        d3_bar(self, nums, 1);

});

Answer 1

你的self变量是一个jQuery对象,D3js期望一个选择器或DOM元素(Node).

d3.select(选择器)

选择与指定选择器字符串匹配的第一个元素,返回单个元素选择.如果当前文档中没有元素与指定的选择器匹配,则返回空选择.如果多个元素与选择器匹配,则仅选择第一个匹配元素(以文档遍历顺序).

d3.select(节点)

选择指定的节点.如果您已经拥有对节点的引用(例如事件侦听器中的d3.select(this))或者诸如document.body之类的全局节点,则此选项非常有用.此函数不会遍历DOM.

-

选择元素

...这些方法也可以接受节点,这对于与第三方库(如jQuery)集成很有用

要从jQuery对象获取底层JavaScript DOM元素,您可以这样做

$('#myElem')[0];

因此,在您的情况下,您可以将JavaScript DOM元素传递给d3.select类似的东西

var svg = d3.select(self[0])...

这里解释了为什么以及如何工作.

function d3_bar(self, dataset, barPadding) {

  var w = parseInt(d3.select(".barChart").style("width"),10);
  var h =  parseInt(d3.select(".barChart").style("height"),10);

  var svg = d3.select(self[0])
  .append("svg")
  .attr("width", w)
  .attr("height", h);

  svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return i * (w / dataset.length);
  })
  .attr("y", function(d) {
    return h - (d * 4);
  })
  .attr("width", w / dataset.length - barPadding)
  .attr("height", function(d) {
    return d * 4;
  })
  .attr("fill", function(d) {
    return "rgb(0, 0, " + (d * 10) + ")";
  });

}

$('.barChart').each(function(i) { 

  var self = $(this),
      nums = self.data('value').split(',').map(Number);

  d3_bar(self, nums, 1);

});

.barChart:first-child {
  height:200px;
  width:500px;
}

.barChart:last-child {
  height:10px;
  width:50px;
}

<div class="barChart" data-value="5,10,13,19,21,25,22,18,15,13,11,12,15,20,18,17,16,18,23,25"></div>
<div class="barChart" data-value="1,5,2,2,5,1,0,7,5,3"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alignedleft.com/content/03-tutorials/01-d3/d3/d3.v3.min.js"></script>