d3.js , dimple , 在图表上获取标题

Question

我正在使用酒窝模板，但找不到标题命令。所以我只是为它查找了一个 d3 命令并将它添加到我的代码中。不幸的是，没有显示标题。有人能发现我的错误吗？

<html>
<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
</head>
<body>
<div id="chartContainer">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
      d3.tsv("bbd3.tsv", function (data) {
        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(75, 30, 490, 330)
        var myAxisx = myChart.addMeasureAxis("x", "HR");

        myAxisx.overrideMin = 35;
        myAxisx.overrideMax = 75;
        myAxisx.title = "averaged Number of Home Runs";
        var myAxisy = myChart.addMeasureAxis("y", "avg");
        myAxisy.overrideMin = 0.23;
        myAxisy.overrideMax = 0.255;
        myAxisy.title = "Batting average in % averaged over all players";            var mySeries = myChart.addSeries( ["handedness"], dimple.plot.bubble);
        mySeries.aggregate = dimple.aggregateMethod.avg;
        myChart.addLegend(180, 10, 360, 20, "left");
        myChart.draw();
        svg.append("text")
        .attr("x", (width / 2))             
        .attr("y", 0 - (margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .style("text-decoration", "underline")  
        .text("Value vs Date Graph");
      });
  </script>
</div>
</body>
</html>

Answer 1

我看不到用于放置标题的 margin 和 width 变量的任何声明。由于您的图表定义是固定大小的，您可以将其替换为：

svg.append("text")
    .attr("x", 295)             
    .attr("y", 30)
    .attr("text-anchor", "middle")  
    .style("font-size", "16px") 
    .style("text-decoration", "underline")  
    .text("Value vs Date Graph");

d3.js , dimple , 在图表上获取标题

d3.js , dimple , getting a title on a graph

d3.js

dimple.js