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 div
s 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>
Source: stackoverflow.com
Related Query
- How can I specify a d3.js selector using values from a data object?
- How can i use the data from Hbase to visualize using d3.js
- Using d3 to read in information from a CSV file, how can i store values of a particular type into a variable?
- How can I program a line chart using D3.js to visualise a data which is received from a server side ?
- how to plot data from JSON object on .svg file using D3.js
- Can d3.js draw two scatterplots on the same graph using data from the same source?
- Using d3.js, how can I display data faster on my chart?
- How to select unique values in d3.js from data
- How to update elements of an HTML that the elements are created using data from a CSV file?
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How can I efficiently convert data from string to int within a d3 method chain?
- Two bar charts from same data object using D3.js
- How do I Bind Data from a .tsv to an SVG's paths using d3.js for a Choropleth Map
- How to create d3 graph using data from Rails database
- how to fetch data from postgresql using d3.js
- How to fetch data from json file to draw a dynamic graph by using d3.js
- In a d3 scatterplot using data from a csv file, how do i draw lines connecting related points when the mouse is over a point?
- How do you call data from nested JSON array using d3?
- In d3.js, while importing csv files using a row conversion, how can I "slice" the data to only include a range of rows?
- d3js: How to select only x number of values from data
- How to reshaping Data in Javascript from array to object without losing some of the data
- How to access key values in an object using d3.js?
- How can I use column values for SVG colors using JS/D3?
- In D3 I'm assigning a colour to a data category using d3.scale.ordinal(). How can I assign it based on value of x-axis?
- How can I select a dot from a scatter and display data about it?
- Data manipulation : How can I append path from my data array?
- How can I group data to be filtered without losing crossfilter functionality using dc.js?
- How can I get the equivalent to a "this" keyword from d3 using d3.select()?
- How can I pass json data returned from a webservice into D3.json(...)?
- Using d3 - How do I select specific data from array to highlight when I click a button?
More Query from same tag
- How to change the scale on the stackedAreaChart of NVD3
- Filter nodes for D3 directed graph dynamically
- D3 chord diagram with many values
- D3 tooltip barely visible when using intro.js
- Run function after multiple dropdown options have been chosen
- d3 pie sort transition
- D3 nest formatting date incorrectly
- Trigger D3 redraw after ng-repeat finishes
- How can I position text inside bubble chart?
- How do I create D3.js projection for South African topojsson data?
- How to change styling of a SVGCircleElement object?
- Change hover over of d3.js sunburst chart so that name of segment is appended rather than %
- Add names from array using 'classed'
- Why d3 removes data during second update
- emberjs view with raphael or d3
- Need a vertical scroll in nvd3 multiBarHorizontalChart if no. of bars increases
- Zoomable area in d3 v4 not working
- How to rotate the angle of the cube in d3js?
- D3 graph not updating on click
- javascript = !1 : what does this mean
- Changing a Shapes position on the page D3/JS
- D3 Beginner - having some issues with scale
- d3 dynamic curved line in force layout
- Format numbers to integers with SI prefix
- How to mock a d3.json() call in Angular app with Jasmine tests with Karma task runner
- D3 change the background color of an element based on it's data value
- d3.js - how to insert new sibling elements
- D3js how to append 2 children at the same level in .enter context
- Looking for example of an axis for which axis.tickSubdivide() makes a difference
- How do append a <text> for every element of the data in a D3 svg