将$(this)传入d3选择器

Passing $(this) into d3 selector

本文关键字：传入 d3 选择器 this      更新时间：2023-09-26

我如何将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);
});

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

为什么和如何工作在这里解释。

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>

请勿将jQuery对象与d3.js混淆。var self = $(this)、self为jQuery对象，d3.js不识别

相关文章：