将 $(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 元素（节点）。

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])...

解释了为什么以及如何工作here。

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>

Answer 2

不要将 jQuery 对象与 d3.js 混淆。 var self = $(this)，self 是一个 jQuery 对象，d3.js 无法识别它。