Как нарисовать вертикальную линию с углублением?

Question

Следуя примеру в этом link, я хотел бы нарисовать вертикальную линию на моем графике. Проблема заключается в том, когда я пытаюсь создать вертикальную линию (на ту же дату), вместо того, чтобы получить линию, ямочка добавляет мои 2 значения и рисует точку, как в этом примере: fiddle

var dim = {"width": 590,"height": 450}; //chart container width 
    var data = [{"date": "01-02-2010", "cost": "11.415679194952766"}, {"date": "01-03-2010", "cost": "10.81875691467018"}, {"date": "01-04-2010", "cost": "12.710197879070897"}]; 

    function barplot(id, dim, data) { 
     keys = Object.keys(data[0]); 
     var xcord = keys[0]; 
     var ycord = keys[1]; 
     var svg = dimple.newSvg(id, dim.width, dim.height); 
     var parser = d3.time.format("%d-%m-%Y") 
     var dateReader = function (d) { 
      return parser.parse(d[xcord]); 
     } 
     var start = d3.time.month.offset(d3.min(data, dateReader), -1); 
     var end = d3.time.month.offset(d3.max(data, dateReader), 1); 

     var myChart = new dimple.chart(svg, data); 
     myChart.setBounds(60, 30, 505, 305); 

     //var x = myChart.addCategoryAxis("x", xcord); 
     var x = myChart.addTimeAxis("x", xcord, "%d-%m-%Y", "%b %Y"); 
     x.overrideMin = start; 
     x.overrideMax = end; 
     x.addOrderRule(xcord); 
     x.showGridlines = true; 
     x.timePeriod = d3.time.months; 
     x.floatingBarWidth = 100; 

     var y = myChart.addMeasureAxis("y", ycord); 
     y.showGridlines = true; 
     y.tickFormat = ',.1f'; 

     var s1 = myChart.addSeries(null, dimple.plot.bar); 
     var s2 = myChart.addSeries(null, dimple.plot.line); 
     s2.lineWeight = 3; 

     var s3 = myChart.addSeries("Price Break", dimple.plot.line); 
     s3.data = [{ 
      "Price Break": "high", 
      "cost": 12.71, 
      "date": '13-01-2010' 
     }, { 
      "Price Break": "high", 
      "cost": 12.71, 
      "date": '13-01-2010' 
     }, ]; 

     myChart.draw(1500); 

    } 

    barplot("body", dim, data); 

решение, которое я имею сейчас, это рисовать гистограмму с одним значением, но это обходное решение, потому что позже я хочу добавить текст рядом с этой строкой, также ориентированный на вертикаль.

Я искал в Google и в StackOverflow, но я не могу найти решение этой проблемы, и в документации я также не могу найти никакого намека на то, как это сделать, и это очень раздражает.

Любая помощь будет оценена :)

Я видел, как вы можете сделать линию с d3, проблема заключается в том, что я хочу это рисуется ямочка.

Answer 1

Приведенный вами подход рисует линию от минимальной даты до максимальной даты по той же цене. Вы изменили даты для соответствия, что означает, что точки будут агрегированы. Самый простой способ, который я могу сделать, - это создать единую точку, которая автоматически вычерчивает линию по оси x. Привлекая его от скрытой оси 100% будут идти в верхнюю части диаграммы:

Сначала добавьте скрытую процентную ось:

var y2 = myChart.addPctAxis("y", "Dummy"); 
y2.hidden = true; 

Затем сопоставьте новую серию области к нему с единственной точкой данных (значение здесь не имеет значения, как это будет единственной точкой данных и, следовательно, автоматически максимальное значение):

var s3 = myChart.addSeries("Price Break", dimple.plot.area, [x, y2]); 
s3.data = [{ 
    "Price Break": "high", 
    "Dummy": 1, 
    "date": '13-01-2010' 
}]; 

Наконец, вероятно, стоит извлекать подсказке из этой строки, как она ссылается на фиктивное значение:

s3.addEventHandler("mouseover", function() {}); 

Здесь в вашей скрипке:

http://jsfiddle.net/4w6gkq5s/1/