Dimple JS 添加竖线

Question

我想在 Dimple 中画一条垂直线。我看过这个post：How to draw a vertical line with dimple?

但是，此处提供的示例对我不起作用。它只是在我想画一条线的地方添加一个点。我在文档中找不到任何东西，在 Whosebug 上也找不到，也没有通过谷歌搜索找到任何东西，我认为这应该是一件容易的事——但到目前为止，事实证明并非如此。任何帮助将不胜感激。

Fiddle: http://jsfiddle.net/4w6gkq5s/27/

<!DOCTYPE html>
<html>
<body>
<div id="chartContainer">
  <script src="http://dimplejs.org/lib/d3.v3.4.8.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.tsv("http://dimplejs.org/data/example_data.tsv", function (data123) {
      var data = [{'name': "name1", "percentChange": 120}, {'name': "name2", "percentChange": 80}, {'name': "name3", "percentChange": 100}];

      var myChart = new dimple.chart(svg, data);
      myChart.defaultColors = [ new dimple.color("#177c5f") ];

      myChart.defaultColors = [
      new dimple.color("#3d5739"), // green
        ];

      var x2 = myChart.addMeasureAxis("x", "percentChange");
      x2.title = "Percent of last month's sales"
      var y = myChart.addCategoryAxis("y", "name");
      y.addOrderRule("name");
      y.title = null;
      y.showGridLines = true;

      /*Regional average*/
      var y2 = myChart.addPctAxis("y", "Dummy");
      var s3 = myChart.addSeries("Regional", dimple.plot.area, [x2, y2]);
      s3.data = [{
        "Regional": "Regional",
        "Dummy": 1,
        "percentChange": 105
      }];

      var s = myChart.addSeries(["percentChange", "name"], dimple.plot.bar);
      s.barGap = .86;

      // Set some custom display elements for each series shape
      s.afterDraw = function (shape, data) {

        var shape = d3.select(shape);

        // Add some bar labels for the yValue
        svg.append("text")
        .attr("x", parseFloat(shape.attr("x")) + 40)
        .attr("y", parseFloat(shape.attr("y")) - 5)
        .style("text-anchor", "middle")
        .style("font-size", "16px")
        .style("fill", "#73b7e8")
        .style("pointer-events", "none")
        .text(data.cy);
      };

      s.addEventHandler("mouseover", onHover);
      s.addEventHandler("mouseleave", onLeave);
    myChart.draw();

   function onHover(e) {
     e.selectedShape[0][0].style.fill = "#00924f";
   };
   function onLeave(e) {
      e.selectedShape[0][0].style.fill = "#3d5739";
   };
  });
  </script>
</div>
</body>
</html>

Answer 1

该方法不适用于 x 上的测量轴。然而，在这种情况下，解决方案实际上要简单得多。绘制后你可以添加一条带有一点 d3 的线：

svg.append("line")
    .attr("x1", x._scale(105))
    .attr("x2", x._scale(105))
    .attr("y1", myChart._yPixels())
    .attr("y2", myChart._yPixels() + myChart._heightPixels())
    .style("stroke", "red")
    .style("stroke-dasharray", "3");

Fiddle: http://jsfiddle.net/d3jo0uu5/1/

这使用了 dimple 中的几个内部方法来确定高度和宽度，以及用于水平定位线的 x 轴刻度。我已经把它变成了红色和虚线，但是改变了你可以格式化它的样式线——或者设置一个 class 并在 css.

中设置外观

Dimple JS 添加竖线

Dimple JS add vertical line

d3.js

dimple.js