如何使用数据对象中的值来指定d3.js选择器？ [英] How can I specify a d3.js selector using values from a data object?
问题描述
我在web应用程序中使用d3.js。描述我想要做的最简单的方法是查看下面链接的小提琴，但基本设置是我有一个包含数据对象的数组。
my_data = [{
id：B，
text：我想在B中使用此文本
}，{
id： C，
text：我想让这个文本在C
}];
我想将my_data中的text值添加到相应的 ; div> ，它们是由my_data中相应的id指定的。也就是说，DOM包含一个id为B的div，my_data包含一个id为B的对象，所以我想添加text属性的值到< div> ，表示为< p> 元素。
现在的问题。
如何写我的d3选择器使用my_data ，不知道
my_data将包含什么值？ （即，我不想硬编码他们！）
我使用动态数据源，my_data将频繁更改
。我想使用d3将text属性添加到相应的< div> 。
保证my_data中的id属性将具有已经存在于DOM中的具有相同id的< div> / p>
最小示例：
http：// jsfiddle .net / 3Skq3 / 1 /
我已经使用您的示例和教程创建了一个代码片段 http://bost.ocks.org/mike/bar/
只需更改文本即可随时拨打此电话。
d3.select ）.text（'现在我想要B'）;
虽然如果你想要一个更动态的解决方案， p>
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'，'现在我想要B'
这是改编自 https://gist.github.com/CrandellWS/79be3b8c9e8b74549af5
data = [{id：A，text：Hi From，数字：12}，{id：B，文本：Hi From B，数字：8}，{id：C ，text：Hi From C，digit：15}，{id：D，text：Hi From D，digit：42}]; //我想将my_data中的text适当的< divs> ;,这是由my_data中的相应id指定的//如何写我的d3选择器来使用my_data中的id属性，而不知道// my_data将包含什么值？ （即，我不想硬编码他们！）//我使用动态数据源，my_data将经常是//改变。我想将text属性添加到适当的< div>使用d3。 //确保my_data中的id属性具有< div>具有相同的id //已经存在于DOM中//从http://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;}） 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;如果（myRoot [d] [myType] == myVal），控制台的日志文件（如果有的话） {d3.select（'＃'+ myVal）.text（[newText]）; }}}} getObjByValue（data，'id'，'B'，'现在我想要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;}。无衬线字体;背景颜色：steelblue; text-align：right; padding：3px; margin：1px; color：white;}
< script src = ：//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js>< / script>< div id =oldAclass =my_div> < p> Hi From A< / p>< / div>< div id =oldBclass =my_div> < p> Hi From B< / p>< / div>< div id =oldCclass =my_div> < p> Hi From C< / p>< / div>< div id =oldDclass =my_div> < p> Hi From D< / p>< / div>< br>我想在B< div class =chart>< / div>
I'm using d3.js in a web application. The easiest method to describe what I'd like to do is to view the Fiddle linked below, but the basic setup is that I have an array containing data objects.
my_data = [{
id: "B",
text: "I want this text in B"
}, {
id: "C",
text: "I want this text in C"
}];
I want to add the "text" values in my_data to the appropriate <div> in the DOM, which are the ones specified by the corresponding "id" in my_data. That is, the DOM contains a div with id "B", and my_data contains an object with id "B", so I'd like to add the value of the "text" property to that <div>, say as a <p> element.
Now the question.
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.
Minimal example: http://jsfiddle.net/3Skq3/1/
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>
这篇关于如何使用数据对象中的值来指定d3.js选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
