Dimple JS添加垂直线

我想在Dimple中画一条垂直线。我已经看到了这个帖子：How to draw a vertical line with dimple?Dimple JS添加垂直线

然而，例如只要不是为我工作。这只是增加一点，而不是我想要画一条线。我无法在文档，StackOverflow中找到任何内容，也无法通过谷歌搜索找到任何内容，我认为这应该是一件容易的事情 - 但迄今为止它已被证明不是。任何帮助，将不胜感激。

<!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>

来源

2015-03-30 Knockoutuser

这种做法不会有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");

小提琴：http://jsfiddle.net/d3jo0uu5/1/

这使用一对夫妇的内部方法在凹坑为高度和宽度，以及x轴刻度为定位水平线。我已经把它变成了红色和虚线，但改变了样式线，你可以根据自己的需要来设置它的样式 - 或者设置一个类，然后在css中设置外观。

来源

2015-03-31 00:40:11

工作就像一个魅力。我试图upvote这个答案，但它不会让我。感谢您的答复。 – Knockoutuser 2015-03-31 14:54:25

Dimple JS添加垂直线

回答

相关问题