dimple.js : 축상의 점/위치 좌표를 가져옵니다.

Question

시간 기반 (년 단위) X 축을 가진 Dimple.JS 산점도가 있습니다. 임의의 영역에 음영 처리가 가능하도록 (this D3 question과 비슷한 방식으로) (이상적으로는 시작 및 끝 위치가 반드시 시리즈의 데이터 요소가 아님).

SVG에서 저울의 올바른 위치에 X를 제공하고 나에게 X 축을 제공 할 수있는 기존 함수가 있습니까? 그러면이 사각형을 구형으로 사용할 수 있습니다 (나는 딤플이 위치를 잡는 방법을 알아 내기위한 소스 코드 ...)?

또는 차트에 이미 그려진 점을 사용하는 것이 더 실용적인 경우 d3.select와 보조개를 사용하여 특정 점에 액세스하는 올바른 방법은 무엇입니까? 내 일련의 날짜 필드 (일/월/년)가 그래서 나는이 같은 SVG 요소가 있습니다

<circle id="All_Wed Mar 18 1931 00:00:00 GMT+0000 (GMT)__" class="series0 bubble All Wed_Mar_18_1931_00:00:00_GMT+0000_(GMT) " cx="465.0000000006503" cy="362.1714285714286" r="2" opacity="0.8" fill="#e90e0e" stroke="#c20b0b"></circle>

... 내 생각이었다 내가 그 액세스 할 수 mySeries.shapes.select (ID)를 사용해야하지만, 대한 :

mySeries.shapes.select("#All_Wed Mar 18 1931 00:00:00 GMT+0000 (GMT)__");

또는 (바보 같은 구문 오류가 아니라면 내가 그것을 탈출하는 경우) :

mySeries.shapes.select("#All_Wed Mar\ 18\ 1931\ 00:00:00\ GMT+0000\ (GMT)__");

"유효하지 않은 선택기"가 표시됩니다.

그러나 당신과 나 사이에 (감사합니다)은 향후 버전에서이 방법 (> 1.1.5)를 작동하지 않을 수 있습니다, 그래서 당신은이 작업을 수행 할 축이 아닌 공공 방법을 사용할 필요가

Answer 1

, I 축의 축척 방법이 곧 사라질 것이라고 생각하지 마십시오.

draw 차트가 호출되면 값을 변환 할 수있는 방법으로 추가 된 원시 d3 스케일 메서드입니다. 솔루션을 설명하기 위해 바이올린을 만들었습니다. 이것은 당신이 음의 값을 처리하는 경우 약간의 조정이 필요하거나 축 기록합니다

// Draw a simple chart 
var svg = dimple.newSvg("body", 800, 600); 
var data = [ 
    { "a":300, "b":2000, "c":"a" }, 
    { "a":400, "b":3000, "c":"b" }, 
    { "a":340, "b":2200, "c":"c" }, 
    { "a":300, "b":5000, "c":"d" } 
]; 
var chart = new dimple.chart(svg, data); 
var x = chart.addMeasureAxis("x", "a"); 
var y = chart.addMeasureAxis("y", "b"); 
chart.addSeries("c", dimple.plot.bubble); 
chart.draw(); 

// Draw a grey region using the following co-ordinates 
var fromX = x._scale(210), 
    toX = x._scale(320), 
    fromY = y._scale(2200), 
    toY = y._scale(3100) 

svg.append("rect") 
    .attr("x", fromX) 
    .attr("y", toY) 
    .attr("width", toX - fromX) 
    .attr("height", fromY - toY) 
    .style("fill", "grey") 
    .style("opacity", 0.2); 

는 여기에 바이올린입니다 : 위대한 http://jsfiddle.net/T6ZDL/7/