Javascript 如何使用数据对象中的值指定d3.js选择器？

我正在web应用程序中使用d3.js。描述我想做什么的最简单方法是查看下面链接的小提琴，但基本设置是我有一个包含数据对象的数组

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

我想将my_数据中的文本值添加到DOM中相应的值中，这些值由my_数据中相应的id指定。也就是说，DOM包含一个id为B的div，my_数据包含一个id为B的对象，因此我想将text属性的值添加到该对象中，比如作为元素

现在是问题

在不知道的情况下，如何编写d3选择器来使用我的_数据中的id属性 my_数据将包含哪些值？也就是说，我不想硬编码它们！ 我使用的是一个动态数据源，我的_数据经常会 改变。我想使用d3将text属性添加到相应的。 可以保证my_数据中的id属性将具有具有相同id的 已存在于DOM中

最简单的例子： 传递给d3.select的选择器只是字符串。因此，您可以使用该属性的值并将其与选择器的其他部分连接起来。例如：

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

---

这里有一个稍微多一点的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完成的，但我们必须在这里对其进行破解，因为元素已经存在。在那之后，事情就简单了。完整示例。

这类似于Lars的建议，但如果您的页面上有很多s，并且只有一小部分将被操纵，则可能更有效

首先，选择所有元素，然后基于数据数组。然后，您只处理有数据的元素。它处理key:value对象中的数据的速度稍微快一点，但您也可以在过滤器测试中使用它

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函数{return dataMap[this.id]；}将数据绑定到元素。

我使用您的示例和

要更改文本，您可以随时拨打此电话

d3.选择'B'。文本'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');

改编自

数据=[{ id:A， 文本：你好，来自A， 数字：12 }, { id:B， 文本：你好，B， 数字：8 }, { id:C， 文本：你好，来自C， 数字：15 }, { id:D， 文本：你好，来自D， 数字：42 }]; //我想将我的_数据中的文本值添加到相应的 //由my_数据中的相应id指定。 //在不知道的情况下，如何编写d3选择器来使用我的_数据中的id属性 //my_数据将包含哪些值？也就是说，我不想硬编码它们！ //我使用的是一个动态数据源，我的_数据经常会 //改变。我想使用d3将text属性添加到相应的。 //可以保证my_数据中的id属性将具有具有相同id的 //已存在于DOM中。 //从教程 //http://bost.ocks.org/mike/bar/ //var数据=[4,8,15,16,23,42]； var x=d3.scale.linear .domain[0,4] .范围[0,42]； d3.select.chart .selectAlldiv .数据 .enter.appenddiv .attrid，函数d{return d.id} .attrname，函数d{return d.id} .stylewidth，函数{返回xd.digit+px；} .textfunctiond{return d.text；}； //从教程 //http://bost.ocks.org/mike/bar/ //var数据=[4,8,15,16,23,42]； var x=d3.scale.linear .domain[0,4] .范围[0,42]； d3.select.chart .selectAlldiv .数据 .enter.appenddiv .attrid，函数d{return d.id} .attrname，函数d{return d.id} .stylewidth，函数{返回xd.digit+px；} .textfunctiond{return d.text；}； 函数getObjByValuemyRoot、myType、myVal、newText{ 变量d； console.logtypeof myRoot iftypeof myRoot==对象{ 福特在我的根{ console.logmyRoot[d][myType] ifmyRoot[d][myType]==myVal{ d3.选择+myVal.text[newText]； } } } } getObjByValuedata'id'，'B'，'现在我想要B'； A{ 背景颜色：钢蓝色； } B{ 背景色：红色； } C{ 背景颜色：绿色； } D{ 背景颜色：橙色； } 奥尔达{ 背景颜色：钢蓝色； } 奥尔德{ 背景色：红色； } 奥德克{ 背景颜色：绿色； } 奥尔德{ 背景颜色：橙色； } .海图组{ 字体：10px无衬线； 背景颜色：钢蓝色； 文本对齐：右对齐； 填充：3倍； 保证金：1px； 颜色：白色； } 你好，来自一家酒店

你好，B

你好，C

你好，D

我想要这个t 外线B

---

感谢Felix，它只得到一个选择，那么循环我的_数据，为每个元素进行选择的想法是什么呢？