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，因此不需要selectAll（）部分。以下内容将使您的代码进行更改：

＆＃13;

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

＆＃13;

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

＆＃13;

标题没有出现在我的D3js雷达图表上

1 个答案: