d3.symbols가 ClipPath 영역에 의해 잘리고 있습니다.

Question

아직 D3에 대한 역량을 향상시키는 과정에서 SVG 요소에 확대/축소 곡선을 그릴 때 문제가 발생합니다. 해당 플롯이 확대/축소시 여백을 침범하지 않도록하는 clipPath rect)이지만 clipPath 여백은 d3.symbols의 표시를 플롯에서 잘라냅니다.

당신이 묘사되어 삼각형 기호의 일부만을 볼 수있는이 경로에 의해 0,0 그려 절단되어 있기 때문에 내 생각, 플롯

var margin = {top: 20, right: 60, bottom: 30, left: 30}, 
    w = 960 - margin.left - margin.right, 
    h = 500 - margin.top - margin.bottom; 

var svg = d3.select("body").append("svg") 
       .attr("width", w + margin.left + margin.right) 
      .attr("height", h + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.append("defs").append("clipPath") 
     .attr("id", "clip") 
    .append("rect") 
     .attr("width", w) 
     .attr("height", h); 

// The curve I want to plot: y=x^2 
var my_curve = d3.range(10).map(function(d) { var my_y = d * d; return { "x" : d, "y" : my_y }; }); 

var x_range_min = d3.min(my_curve, function(d) { return d.x; }); 
var x_range_max = d3.max(my_curve, function(d) { return d.x; }); 
var y_range_min = d3.min(my_curve, function(d) { return d.y; }); 
var y_range_max = d3.max(my_curve, function(d) { return d.y; }); 

var xScale = d3.scaleLinear().domain([x_range_min, x_range_max]).range([0, w]); 
var yScale = d3.scaleLinear().domain([y_range_max, y_range_min]).range([0, h]); 

var xAxis = d3.axisBottom().scale(xScale); 
var yAxis = d3.axisLeft().scale(yScale); 


// symbols 
svg.selectAll(".my_pts").data(my_curve).enter().append("path") 
    .attr("class", "my_pts") 
    .attr("d", d3.symbol().type(d3.symbolTriangle).size(200)) 
    .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; }) 
    // with this zoomed line does not enter margin area 
    .attr("clip-path", "url(#clip)"); 

...에 대한 관련 코드 번역 전에 clipPath를 수행 할 수 있습니다. 나는 또한 당신이 문제가 발생하지 않은 경우합니다 (clipPath이 필요한 이유를 볼 수 있도록, 브러시 & 줌 기능, 코드의 더 완전한 버전을 찾을 수있는이 바이올린 https://jsfiddle.net/fabio_p/988c1sjv/ 을 게시 한

여백 전)

내 질문은 다음과 같습니다.이 문제의 해결 방법이 있습니까? 나중에 번역 할 필요없이 올바른 위치에 심볼을 직접 그릴 수있는 방법을 찾고 싶었지만 (아마도 "사용자 정의 심볼 유형"을 사용했을 가능성이 있습니다), 내가 제작할 수 없었기 때문에 현재의 기술을 넘어서는 것 같습니다. 실제 솔루션.

모든 의견을 환영합니다. 미리 감사드립니다.

var clipping = svg.append("g") 
    .attr("clip-path", "url(#clip)"); 

을 그리고 라인과 그룹의 기호를 모두 추가합니다 :

Answer 1

클립 경로 그룹을 작성

다음

clipping.append("path") 
    .data([my_curve]) 
    //etc... 

업데이트 된 바이올린은 다음과 같습니다 https://jsfiddle.net/cvtvrL2q/