D3js - 无法更改svg文本元素的样式

时间:2014-02-21 08:53:12

标签: javascript html5 canvas d3.js

我正在使用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;});

1 个答案:

答案 0 :(得分:2)

报告错误:

Uncaught ReferenceError: family is not defined 

因为d.font-family不被视为变量font-family的属性d,而是变量font的属性d减去family

此外,red与未定义的变量一样使用。

您必须将代码更改为:

    ...
    .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;});