Question

我是Javascript的新手，我正在尝试绘制4个雷达图表。每个图表都有不同的标题。我创建了TitleOptions var并在下面调用它。但它显示了每个图表上的所有内容。我可以使用ChartID过滤标题吗？我在下面附上了我的代码。谁能帮助我呢？

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

    var colorscale = d3.scale.category10();

    //Legend, titles
    var LegendOptions = ['Try Count','Succcess Count', 'Success Rate'];
    var TitleOptions=['Try/Success Count Per Skill', 'Try/Success Rate Per Skill', 'Point Get Per Skill', 'Point Lose Per Skill']

    ////////////////////////////////////////////
    /////////// 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('g').append("text")
    .attr("class", "title")
        .attr('transform', 'translate(90,0)') 
        .attr("x", 30)
        .attr("y", 10)
        .attr("font-size", "12px")
        .attr("fill", "#404040")
    //  .text("What % of owners use a specific service in a week");
        .text(TitleOptions);


    //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
    }
    //Load the data and Call function to draw the Radar chart
    //  dynamic data creation
    d3.json("<c:url value='/chart/radarChartData.do?ChartID=${ChartID}&PlayerKey=${PlayerKey}'/>", function(error, data){
        RadarChart.draw("#chart", JSONconverter(data.list), mycfg);
    });
    </script>

Answer 1

将绘图部件封装到一个函数中并调用它四次。类似的东西：

beforeEach(function() {

    var parentSpec = this.currentTest.parent;

    if (!parentSpec.testcount) {
        parentSpec.testCount = parentSpec.tests.length;
        parentSpec.currentTestIndex = 0;
    } else {
        parentSpec.currentTestIndex = parentSpec.currentTestIndex + 1;
    }

    if (parentSpec.skipSubsequent) {

        parentSpec.skipSubsequent = false;
        var length = parentSpec.tests.length;
        var currentIndex = parentSpec.currentTestIndex;

        for (var i = currentIndex + 1; i < length; i++) {
            parentSpec.tests[i].fn = function() {
                this.skip();
            };
        }
    }
});


afterEach(function() {
    if (this.currentTest.state === 'failed') {
        this.currentTest.parent.skipSubsequent = 'true'
    }
});

如何在D3js中显示不同图表的不同标题？

1 个答案: