dc.js 시리즈에서 d3.time.scale()에 대한 사용자 정의 틱/마커 추가

Question

날짜 축의 특정 날짜에 마커를 추가하고 싶습니다. 아래의 꺾은 선형 차트를 참조하십시오.

내 xAxis는이 함수로 그려지며, 여기서 dateMin 및 dateMax는 프런트 엔드 (또는 브러시 등)를 통해 사용자가 설정할 수 있습니다.

d3.time.scale.utc().domain([dateMin,dateMax]); 

즉, tickValues는 자동으로 계산됩니다.

이제 데이터가 잘리는 고정 된 날짜가 있습니다. 예를 들어 2014 년 1 월 31 일까지 최대 수치를 통합 한 다음 2014 년 2 월 1 일 이후부터 예측 된 데이터를 볼 수 있습니다.

내가해야할 일은 컷오프 시점을 시각적으로 명확하게하는 것입니다. 나는 아래의 JPG에 날짜에 빨간 수직선을 수동으로 그렸다. 하지만 d3을 사용하여 프로그래밍 방식으로이 작업을 수행하려면 어떻게해야합니까?

단점은 차단 날짜 (예 : 2014 년 1 월 1 일부터 2014 년 1 월 20 일까지)가 포함되지 않은 날짜 범위 (브러시 등 사용)를 선택하는 것일 수 있습니다. 이 경우 선을 그려서는 안됩니다.

가능하면 꺾은 선형 차트의 실제 줄이 컷오프 날짜와 다르게 보이는 것이 좋습니다. 단색 대신 점선으로 표시하거나 색상이 채도가 낮아 (.brighter?) 기본 데이터가 아직 통합되지 않았 음을 시각적으로 명확하게 나타낼 수 있습니다.

아무런 힌트를 주셔서 감사합니다. 나는 아직 유래하는 이미지를 게시 할 수 없습니다

죄송합니다, 그래서 내가 여기에 예를 업로드 :

아래 코드를 사용하여 답변

에서 코드를 시도, 라인 및 라벨이 그려 얻을, 주어진 x 값 (cutoffDate)이 아니라 2014-01-29 저녁 시간대에서 너무 일찍 나타납니다.

 var cutoffDate = new Date("2014-02-01T00:00:00Z"); 

     seriesChart.svg().append("svg:line") 
       .attr("x1", xScale(cutoffDate)) 
       .attr("x2", xScale(cutoffDate)) 
       .attr("y1", yScale.range()[1]) 
       .attr("y2", yScale.range()[0]) 
       .style("stroke", "rgb(225,0,0)") 
       .style("stroke-width", "1"); 

     seriesChart.svg() 
       .append("text") 
       .attr("text-anchor", "start") 
       .attr("x", xScale(cutoffDate)) 
       .attr("y", 80) 
       .text("Projected data"); 

여기에 결과를 참조하십시오 : 내 원래의 질문에 http://i.imgur.com/0PXKFup.jpg

를, 내가 언급하지 않았다 내가 dc.js를에서 seriesChart을 사용하고 있습니다 : seriesChart API docs 나는 이것이 엑스 스케일로 무언가를 가정 할 때를 seriesChart를 작성하므로 나중에 xScale에 값을 설정하면 화면이 전환됩니다. 더 조사 할 것이다.

업데이트 : x 위치는 이것이를 해결

chart.svg().append() 

하지만

chart.chartBodyG().append() 

사용되지 않는 dc.js를 차트 SVG 요소를 추가

올바른 방법 해결 차트에 추가 된 맞춤 요소의 위치 오프셋. 이것을 Lars의 답변과 함께 사용하면됩니다.

Answer 1

이것은 하나의 축에서는 달성하기 어렵지만 별도의 축을 사용하면 쉽게 구현할 수 있습니다.첫째, 분할 라인,이 같은 코드를 사용할 수 있습니다

svg.append("line") 
    .attr("x1", xScale(cutoffDate)) 
    .attr("x2", xScale(cutoffDate)) 
    .attr("y1", yScale.range()[0]) 
    .attr("y2", yScale.range()[1]); 
svg.append("text").attr("x", xScale(cutoffDate) + 10).attr("y", yCoord) 
    .text("projected"); 

다른 스타일을 가지고, 서로 다른 두 축 사용 : 일단 추가

var xScale1 = d3.time.scale().domain([..., cutoffDate]).range([0, 100]), 
    xScale2 = d3.time.scale().domain([cutoffDate, ...]).range([100, 200]); 
svg.append("g").attr("class", "before") 
    .call(d3.svg.axis().scale(xScale1)); 
svg.append("g").attr("class", "after") 
    .attr("transform", "translate(" + xScale1.range()[1] + ",0)") 
    .call(d3.svg.axis().scale(xScale2)); 

을, 당신은 클래스를 사용하여 축 스타일을하거나 개별 DOM 요소를 선택하여

var xScale = function(x) { return x < cutoffDate ? xScale1(x) : xScale2(x); }; 

특정 응용 프로그램에 따라 다릅니다이를 구현하기 위해 정확한 가장 좋은 방법은 있지만, 위의 주어야한다 : -이 두 스케일로 끝날 것을 의미 컴퓨팅 쉽게 좌표를 사용하기 위해, 당신은 그 (것)들을 포장 할 수 당신은 그것을하는 방법을 대략적인 가이드.