如何让d3.js将.csv中的hexcolor识别为一组框的适当十六进制颜色?

vyu0f0g1  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(130)

我有这个代码,成功加载我的.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的方式上有所不同。

w41d8nur

w41d8nur1#

.style("fill",文本-${d.color} )更改为.style("fill", d.color)就可以了。:)

相关问题