Передача $ (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 Element (Node).

d3.select (селектор)

Выбирает первый элемент, который соответствует заданной строке селектора, возвращая выбор одного элемента. Если ни один элемент в текущем документе не соответствует указанному селектору, возвращает пустой выбор. Если несколько элементов соответствуют селектору, будет выбран только первый соответствующий элемент (в порядке обхода документа).

d3.select (узел)

Выбор указанного узла. Это полезно, если у вас уже есть ссылка на узел, такой как d3.select (this) внутри прослушивателя событий или глобальный, например document.body. Эта функция не пересекает DOM.

-

Выбор элементов

... Эти методы могут также принимать узлы, которые полезны для интеграции со сторонними библиотеками, такими как JQuery

Чтобы получить базовый элемент JavaScript DOM из объекта jQuery , вы можете просто сделать

$('#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 не распознает его.