Dimple JS добавить вертикальную линию

Я пытаюсь нарисовать вертикальную линию в Dimple. Я видел этот пост: How to draw a vertical line with dimple?Dimple JS добавить вертикальную линию

Однако приведенный здесь пример не работает для меня. Это только добавление точки, где вместо этого мне нужна линия для рисования. Я не могу найти что-либо в документах, ни на StackOverflow, ни через Googling, и я думаю, что это должно быть легко сделать, но пока это не так. Любая помощь будет оценена по достоинству.

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>

источник

2015-03-30 Knockoutuser

Такой подход не будет работать с осью меры по х. Однако в этом случае решение на самом деле намного проще. После рисования вы можете добавить строку с немного 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/

Это использует несколько внутренних методов в углублении по высоте и ширине, а также шкалы оси х для позиционирования линия горизонтально. Я сделал его красным и разбитым, но меняя линии стиля, вы можете отформатировать его, как хотите, или вместо него установить класс и установить внешний вид в css.

источник

2015-03-31 00:40:11

Работал как очарование. Я постарался поднять этот ответ, но это не позволит мне. Спасибо за ваш ответ. – Knockoutuser

Dimple JS добавить вертикальную линию

ответ

Смежные вопросы