我有这个代码,成功加载我的.CSV数据。
// Read the CSV file and parse the data
d3.csv("Data.csv").then(function(data) {
// Store the parsed data in the variable.
var parsedData = data;
// Convert the data to the format expected by the visualization code.
var nodeData = parsedData.map(function(d) {
console.log("color: ", d.color); // add this line to check the color value
return {
occ: d.occ,
position: [+d.x * smaller_width, +d.y * smaller_height],
parentPosition: [+d.parent_x * smaller_width, +d.parent_y * smaller_height],
color: d.color
};
});
字符串
然后,稍后我用CSV上的坐标在我的可视化上放置盒子,并用CSV上的文本标记它们。我想用CSV上保存的十六进制颜色给盒子上色,但这似乎不适合我。下面是我的代码尝试。
d3.select(this)
.append("rect")
.classed("rect", true)
.attr("occ", `rect-${d.occ}`)
.attr("x", -10)
.attr("y", -20)
.attr("width", 20)
.attr("height", 40)
.style("fill", `text-${d.color}`) // I've also tried just ${d.color}, just color, and just d.color, and hundreds other variations... I can't seem to make it work.
.style("paint-order", "stroke fill markers");
型
我试着改变了color的调用方式,但我似乎找不到语法。在我的代码中,我有对text的调用,但这些似乎都不起作用。我想知道问题是否在于style和attr函数在处理d.elements的方式上有所不同。
1条答案
按热度按时间w41d8nur1#
将
.style("fill",
文本-${d.color})
更改为.style("fill", d.color)
就可以了。:)