標題不會出現在我的D3js雷達圖上

Question

我是新來的java腳本，我正在嘗試繪製雷達圖表。除了標題，一切都很好。你能告訴我什麼是錯的嗎？我附上了下面的代碼。首先我創建文本var並調用它顯示。

<style> 
    body { 
     overflow: hidden; 
     margin: 0; 
     font-size: 14px; 
     font-family: "Helvetica Neue", Helvetica; 
    } 
    #chart { 
     position: absolute; 
     top: 60px; 
     left: 20px; 
    } 
</style> 
<script type="text/javascript" src="<c:url value='/js/radar.js'/>"></script> 

<div id="body"> 
    <div id="chart"></div> 
</div> 

<script> 
    var w = 200; 
    var h = 200; 

    var colorscale = d3.scale.category10(); 

    //Legend, titles 
    var LegendOptions = ['Try Count','Succcess Count', 'Success Rate']; 

    //////////////////////////////////////////// 
    /////////// Initiate legend //////////////// 
    //////////////////////////////////////////// 
    var svg = d3.select('#body') 
     .selectAll('svg') 
     .append('svg') 
     .attr("width", w+300) 
     .attr("height", h) 

    //Create the title for the legend 
var text = svg.append("text") 
    .attr("class", "title") 
     .attr('transform', 'translate(90,0)') 
     .attr("x", w - 70) 
     .attr("y", 10) 
     .attr("font-size", "12px") 
     .attr("fill", "#404040") 
     .text("What % of owners use a specific service in a week"); 


    //Initiate Legend 
    var legend = svg.append("g") 
     .attr("class", "legend") 
     .attr("height", 100) 
     .attr("width", 200) 
     .attr('transform', 'translate(90,20)') 
     ; 
     //Create colour squares 
     legend.selectAll('rect') 
      .data(LegendOptions) 
      .enter() 
      .append("rect") 
      .attr("x", w - 65) 
      .attr("y", function(d, i){ return i * 20;}) 
      .attr("width", 10) 
      .attr("height", 10) 
      .style("fill", function(d, i){ return colorscale(i);}) 
      ; 
     //Create text next to squares 

     legend.selectAll('text') 
      .data(LegendOptions) 
      .enter() 
      .append("text") 
      .attr("x", w - 52) 
      .attr("y", function(d, i){ return i * 20 + 9;}) 
      .attr("font-size", "11px") 
      .attr("fill", "#737373") 
      .text(function(d) { return d; }) 
      ; 


    //Options for the Radar chart, other than default 
    var mycfg = { 
     w: w, 
     h: h, 
     maxValue: 0.6, 
     levels: 6, 
     ExtraWidthX: 300 
    } 

Answer 1

嘗試改變：

var svg = d3.select('#body') 
    .selectAll('svg') 
    .append('svg').... 

要：

var svg = d3.select('#body') 
    .append('svg').... 

當您只追加一個SVG，你不需要全選（）一部分。下面以你的代碼，使一個變化：

var w = 200; 
 
var h = 200; 
 

 
var svg = d3.select('#body') 
 
    .append('svg') 
 
    .attr("width", w+300) 
 
    .attr("height", h) 
 

 
var text = svg.append('g').append("text") 
 
    .attr("class", "title") 
 
    .attr('transform', 'translate(90,0)') 
 
    .attr("x", w - 70) 
 
    .attr("y", 10) 
 
    .attr("font-size", "12px") 
 
    .attr("fill", "#404040") 
 
    .text("What % of owners use a specific service in a week");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="body"></div>