D3js-無法更改svg文本元素的樣式

Question

我正在使用d3.js在svg畫布上創建文本元素。 我正在嘗試更改文本樣式。 但是它似乎不起作用。 只有xy坐標可以成功更改，但是其他屬性（如字體大小和顏色）將不會更改。 我也嘗試使用.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;});

Answer 1

報告錯誤：

Uncaught ReferenceError: family is not defined 

因為d.font-family不被視為變量d屬性font-family ，而是被視為變量d減去family屬性font 。

同樣， 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;});