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

Question

我正在使用d3.js在svg畫布上創建文本元素。我試圖改變文本的風格。但不知怎的，它似乎並沒有工作。只有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;}); 

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