Question

如何将自$(this)参数传递给d3选择器？

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解释了为什么以及如何运作。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

将$（this）传递给d3选择器

2 个答案: