javascript - 将 $(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(selector)

Selects the first element that matches the specified selector string, returning a single-element selection. If no elements in the current document match the specified selector, returns the empty selection. If multiple elements match the selector, only the first matching element (in document traversal order) will be selected.

d3.select(node)

Selects the specified node. This is useful if you already have a reference to a node, such as d3.select(this) within an event listener, or a global such as document.body. This function does not traverse the DOM.

-

Selecting Elements

...These methods can also accept nodes, which is useful for integration with third-party libraries such as 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>