score:0

the selectors you pass to d3.select are just strings. so you can use the value of the property and concatenate it with other parts of the selector. for example:

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

score:0

here's a slightly more d3 way to do it. the idea is to prepopulate the divs with data that you can then match your data array against to "filter" out the nodes you want. this is a bit contrived, but enables you to use d3's data matching to do the hard work.

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

the .each() "binds" the data to the elements by getting their current ids. this would usually be done through .data() in d3, but we have to hack it here as the elements exist already. after that, it's straightforward. complete example here.

score:0

this is similar to lars' suggestion, but might be more efficient if you've got lots of <div>s on your page and only a small number are going to be manipulated.

first, select all <div> elements, then filter that selection based on your data array. then you're only working with the elements that you have data for. it works a little faster with the data in a key:value object, but you could also use array.some() in your filter test.

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

if you're going to be doing more complex things than just setting the text, you'll want to bind the data to the element with .datum(function(){ return datamap[this.id]; }).

score:0

i have created a snippet using your sample and the tutorial at http://bost.ocks.org/mike/bar/

to just change the text you can make this call at any time.

d3.select('#b').text('now i want to b');

though if you want a more dynamic solution this function should help.

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

which was adapted from 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? (i.e., 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>


Related Query

More Query from same tag