Dimple JS add vertical line

问题

I am trying to draw a vertical line in Dimple. I have seen this post: How to draw a vertical line with dimple?

However, the example provided there is not working for me. It is only adding a point where instead I'd like a line to be drawn. I cannot find anything in the docs, nor on StackOverflow, nor via Googling and I would think this should be an easy thing to do- but so far it has proven not to be. Any help would be appreciated.

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>

回答1:

That approach won't work with a measure axis on x. However the solution is actually much simpler in this case. After drawing you can add a line with a bit of 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/

This uses a couple of the internal methods in dimple for height and width as well as the x axis scale for positioning the line horizontally. I've made it red and dashed but changing the style lines you can format it however you wish - or set a class instead and set the appearance in css.

来源：https://stackoverflow.com/questions/29352970/dimple-js-add-vertical-line

标签

d3.js

dimple.js