我真的很挣扎。我正在使用 d3 库在 javascript 中创建点图。我想过滤实际绘制的点,以便稍后我可以将文本字段添加到数据集中名为“突出显示”的列中指定的其中一些字段。就像测试一样,我只绘制标记为“是”的圆圈,但最终会绘制所有圆圈。我只包含了实际的绘图代码,因为我很确定数据结构是正确的。下面的代码按照我的预期绘制了圆圈。
var category = plot.selectAll("."+media+"category")
.data(plotData)
.enter()
.append("g")
.attr("transform", function (d) {return "translate(0," + yScale(d.key) + ")"; })
.attr("class", media+"category")
.call(function(parent){
parent.append('text')
.attr("class", media+"Subtitle")
.attr("x",margin.left)
.attr("y",0)
.text(function(d){return d.key})
parent.selectAll('circles')
.data(function(d){
//console.log("object= ",d)
let filtered=d.values.filter(function(d){
return d.highlight=="yes"
})
//console.log("circles filtered ", filtered)
return filtered
})
.enter()
.append('circle')
.attr("class",function(d,i){
if(d.highlight=="yes"){
return media+"highlight"
}
else {return media+"fill"}
})
.attr("id",function(d){return d.name +" "+d.value+ " "+d.size})
.attr("cx",function(d){return xScale(d.value)})
.attr("cy",yScale.rangeBand()*.4)
.attr("r", function(d) {
if (size) {return d.size*(yScale.rangeBand()*.003 )}
else {return yOffset/2}
})
.attr("transform", function (d) {return "translate("+(margin.left)+","+(0)+")"})
.style("fill",colours[0])
情节如下:
当我尝试添加文本时出现问题。我使用完全相同的过滤器来过滤数据,该数据创建一个数组供 .data 参数使用。然而由于某种原因,虽然第一个对象在数组中,但它没有被绘制。我修改后的代码如下所示:
var category = plot.selectAll("."+media+"category")
.data(plotData)
.enter()
.append("g")
.attr("transform", function (d) {return "translate(0," + yScale(d.key) + ")"; })
.attr("class", media+"category")
.call(function(parent){
parent.append('text')
.attr("class", media+"Subtitle")
.attr("x",margin.left)
.attr("y",0)
.text(function(d){return d.key})
parent.selectAll('circles')
.data(function(d){
//console.log("object= ",d)
let filtered=d.values.filter(function(d){
return d.highlight=="yes"
})
//console.log("circles filtered ", filtered)
return filtered
})
.enter()
.append('circle')
.attr("class",function(d,i){
if(d.highlight=="yes"){
return media+"highlight"
}
else {return media+"fill"}
})
.attr("id",function(d){return d.name +" "+d.value+ " "+d.size})
.attr("cx",function(d){return xScale(d.value)})
.attr("cy",yScale.rangeBand()*.4)
.attr("r", function(d) {
if (size) {return d.size*(yScale.rangeBand()*.003 )}
else {return yOffset/2}
})
.attr("transform", function (d) {return "translate("+(margin.left)+","+(0)+")"})
.style("fill",colours[0])
parent.selectAll('text')
.data(function(d){
console.log("object= ",d)
let filtered=d.values.filter(function(d){
return d.highlight=="yes"
})
console.log("text filtered ", filtered)
return filtered
})
.enter()
.append('text')
.attr("x",function(d){
return xScale(d.value)+(margin.left);
})
.attr("y",function(d){
return yScale.rangeBand()*.4;
})
.text(function(d){
return d.name+' '+d.size
})
.attr("class",media+"subtitle")
但情节是这样的:
无论我在数据集中将多少个圆圈定义为“是”以便绘制它们,第一个圆圈总是缺少其标签。我猜测数据在某个地方发生了变异,但无法弄清楚在哪里。我还尝试在圆圈之前先绘制文本只是为了看看,但结果总是相同的。
这是控制台的输出,显示 .data 数组中包含第一项
[Object, Object, Object, Object]
dot-plot.js:104 object= Object {key: "Endland", values: Array[22]}
dot-plot.js:108 text filtered [Object, Object]0: Objectgroup: "Endland"highlight: "yes"name: "Manchester City"size: "95.65695168"value: "55097"__proto__: Object1: Objectgroup: "Endland"highlight: "yes"name: "Stoke"size: "9.13121722"value: "27743"__proto__: Objectlength: 2__proto__: Array[0]
dot-plot.js:104 object= Object {key: "Spain", values: Array[44]}
dot-plot.js:108 text filtered [Object, Object, Object]0: Objectgroup: "Spain"highlight: "yes"name: "Barcelona"size: "47.32724506"value: "100000"__proto__: Object1: Objectgroup: "Spain"highlight: "yes"name: "Deportivo de La Coru_a"size: "59.93202583"value: "34600"__proto__: Object2: Objectlength: 3__proto__: Array[0]
dot-plot.js:104 object= Object {key: "Italy", values: Array[22]}
dot-plot.js:108 text filtered [Object]
dot-plot.js:104 object= Object {key: "Germany", values: Array[20]}
dot-plot.js:108 text filtered [Object, Object]
我很感激任何人可能有的任何见解。真的很抱歉这么冗长,但我从未使用过 js.fiddle 或者我会举一个例子
Thanks