如何使用數據對象中的值指定d3.js選擇器？

Question

我在Web應用程序中使用d3.js。 描述我想做的最簡單的方法是查看下面的Fiddle鏈接，但是基本設置是我有一個包含數據對象的數組。

my_data = [{
    id: "B",
    text: "I want this text in B"
}, {
    id: "C",
    text: "I want this text in C"
}];

我想將my_data中的“文本”值添加到DOM中的相應<div> ，這些值是由my_data中相應的“ id”指定的。 也就是說，DOM包含一個ID為“ B”的div，而my_data包含一個ID為“ B”的對象，因此我想將<div> text>屬性的值添加到該<div> ，例如<p>元素。

現在的問題。

如何在不知道my_data將包含哪些值的情況下編寫d3選擇器以使用my_data中的“ id”屬性？ （即，我不想對其進行硬編碼！）我正在使用動態數據源，並且my_data會經常更改。 我想使用d3將“文本”屬性添加到適當的<div>中。 可以確保my_data中的“ id”屬性將具有<div> ，該<div>具有DOM中已經存在的相同ID。

最小示例： http : //jsfiddle.net/3Skq3/1/

Answer 1

傳遞給d3.select的選擇器只是字符串。 因此，您可以使用屬性的值並將其與選擇器的其他部分串聯在一起 。 例如：

d3.select('#' + my_data[0].id)

Answer 2

這是D3的一種略微實現方法。 這個想法是用數據預填充div ，然后可以將數據數組與之匹配以“過濾”出所需的節點。 這有點做作，但是使您能夠使用D3的數據匹配來完成工作。

d3.selectAll("div")
  .each(function() { this.__data__ = { id: this.id }; })
  .data(my_data, function(d) { return d.id; })
  .text(function(d) { return d.text; });

.each()通過獲取元素的當前ID將數據“綁定”到元素。 通常可以通過D3中的.data()完成此操作，但是由於元素已經存在，因此我們必須在此處進行破解。 在那之后，這很簡單。 這里完整的例子。

Answer 3

這類似於Lars的建議，但是如果頁面上有很多<div>且將要操縱的數量很少，則效率可能更高。

首先，選擇所有<div>元素，然后根據您的數據數組過濾該選擇 。 然后，您只需要處理您擁有數據的元素。 使用key：value對象中的數據可以更快地工作，但是您也可以在過濾器測試中使用array.some() 。

var dataMap = {};
my_data.forEach(function(d){dataMap[d.id] = d;})

d3.selectAll("div")
  .filter(function(){ return !!dataMap[this.id]; }) 
      //returns true if the element's id is in the data
  .text(function(){ return dataMap[this.id].text; })

如果您要做的不僅僅是設置文本，還需要做更多復雜的事情，那么您將需要使用.datum(function(){ return dataMap[this.id]; })將數據綁定到元素。

Answer 4

我使用您的示例和位於http://bost.ocks.org/mike/bar/的教程創建了一個代碼段

要僅更改文本，您可以隨時撥打此電話。

d3.select('#B').text('Now I want to B');

但是，如果您需要更動態的解決方案，則此功能應該會有所幫助。

  function getObjByValue(myRoot, myType, myVal, newText){
    var d;
    console.log(typeof myRoot)
    if(typeof myRoot == "object"){
      for(d in myRoot){
        console.log(myRoot[d][myType])
        if(myRoot[d][myType] == myVal){
          d3.select('#'+myVal).text([newText]);
        }
      }
    }
  } 

getObjByValue(data, 'id', 'B', 'Now I want to B');

改編自https://gist.github.com/CrandellWS/79be3b8c9e8b74549af5

 data = [{ id: "A", text: "Hi From A", digit:12 }, { id: "B", text: "Hi From B", digit:8 }, { id: "C", text: "Hi From C", digit:15 }, { id: "D", text: "Hi From D", digit:42 }]; // I want to add the "text" values in my_data to the appropriate <divs>, which are the ones // specified by the corresponding "id" in my_data. // How can I write my d3 selector to use the "id" properties in my_data, without knowing // what values my_data will contain? (Ie, I don't want to hardcode them!) // I'm using a dynamic data source, and my_data will frequently be // changing. I'd like to add the "text" property to the appropriate <div> using d3. // It is guaranteed that the "id" properties in my_data will have a <div> with the same id // already present in the DOM. //From the tutorial at //http://bost.ocks.org/mike/bar/ //var data = [4, 8, 15, 16, 23, 42]; var x = d3.scale.linear() .domain([0, 4]) .range([0, 42]); d3.select(".chart") .selectAll("div") .data(data) .enter().append("div") .attr("id", function(d) {return d.id}) .attr("name", function(d) {return d.id}) .style("width", function(d) {return x(d.digit) + "px"; }) .text(function(d) { return d.text; }); //From the tutorial at //http://bost.ocks.org/mike/bar/ //var data = [4, 8, 15, 16, 23, 42]; var x = d3.scale.linear() .domain([0, 4]) .range([0, 42]); d3.select(".chart") .selectAll("div") .data(data) .enter().append("div") .attr("id", function(d) {return d.id}) .attr("name", function(d) {return d.id}) .style("width", function(d) {return x(d.digit) + "px"; }) .text(function(d) { return d.text; }); function getObjByValue(myRoot, myType, myVal, newText){ var d; console.log(typeof myRoot) if(typeof myRoot == "object"){ for(d in myRoot){ console.log(myRoot[d][myType]) if(myRoot[d][myType] == myVal){ d3.select('#'+myVal).text([newText]); } } } } getObjByValue(data, 'id', 'B', 'Now I want to B'); 

 #A { background-color: steelblue; } #B { background-color: red; } #C { background-color: green; } #D { background-color: orange; } #oldA { background-color: steelblue; } #oldB { background-color: red; } #oldC { background-color: green; } #oldD { background-color: orange; } .chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: white; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="oldA" class="my_div"> <p>Hi From A</p> </div> <div id="oldB" class="my_div"> <p>Hi From B</p> </div> <div id="oldC" class="my_div"> <p>Hi From C</p> </div> <div id="oldD" class="my_div"> <p>Hi From D</p> </div> <br> I want this text in B <div class="chart"></div>