我正在使用 d3.js 在 svg Canvas 上创建文本元素。我正在尝试更改文本的样式。但不知何故它似乎不起作用。只有 x-y 坐标可以成功更改,但字体大小和颜色等其他属性不会更改。我也尝试过使用 .attr
而不是 .style
。什么都没发生。谁能帮忙?真的很感激!!
//create canvas
var canvas = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
//text data
var textSpec = [{"content" : "testing", "font-family" : "sans-serif","font-size" : "80px", "color" : "red" , "x" : 100 , "y" : 15}];
//text display
var text = canvas.selectAll("text")
.data(textSpec)
.enter()
.append("text")
.attr("x", function(d) { return d.x;})
.attr("y", function(d) { return d.y;})
.text(function(d) { return d.content})
.style("font-family", function(d) { return d.font-family;})
.style("font-size", function(d) { return d.font-size;})
.style("stroke", red)
.style('fill', function(d) { return d.color;});
最佳答案
报错:
Uncaught ReferenceError: family is not defined
因为 d.font-family
不被视为变量 d
的属性 font-family
而是作为属性 font
变量 d
减去 family
。
此外,red
用作 undefined variable 。
您必须将代码更改为:
...
.style("font-family", function(d) { return d['font-family'];})
.style("font-size", function(d) { return d['font-size'];})
.style("stroke", 'red')
.style('fill', function(d) { return d.color;});
关于javascript - D3js - 无法更改 svg 文本元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21929566/