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添加垂直線

回答

相關問題