사각형 내의 Svg 클립 경로가 작동하지 않습니다.

Question

x 축과 y 축을 가진 간단한 그래프가 있습니다. 내에서 드로잉하는 영역을 축과 겹치지 않게하고 싶습니다.

내 차트를 만들 D3를 사용하고 있지만, 클립 경로가 작동하지 않습니다 특히

http://jsfiddle.net/dsummersl/EqLBJ/1/

:

http://jsfiddle.net/EqLBJ/

var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 39.5}, 
    width = 960 - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var xScale = d3.scale.linear(). 
    domain([xMin, xMax]). // your data minimum and maximum 
    range([0, width]); // the pixels to map to, e.g., the width of the diagram. 

var yScale = d3.scale.linear(). 
    domain([yMax, yMin]). 
    range([0, height]); 

var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(10, d3.format(",d")), 
    yAxis = d3.svg.axis().orient("left").scale(yScale); 


var chart = d3.select("#chart").append("svg") 
    .attr("class", "chart") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .attr("pointer-events", "all") 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .call(d3.behavior.zoom().scaleExtent([0.2, 5]).on("zoom", redraw)); 


var rect = chart.append('svg:rect') 
    .attr('width', width) 
    .attr('height', height) 
    .attr('fill', 'white'); 


var line = d3.svg.line() 
     .interpolate("basis") 
     .x(function(d, i) { return xScale(d.time); }) 
     .y(function(d) { return yScale(d.value); }); 

var clip = chart.append("svg:clipPath") 
    .attr("id", "clip"); 

clip.append("svg:rect") 
    .attr("id", "clip-rect") 
    .attr("width", width) 
    .attr("height", height); 
    // .attr("fill", "white"); 

var path = chart.append("svg:path") 
    .attr("clip-path", "url(#clip-rect)") 
    .data([data]) 
    .attr("class", "line") 
    .attr("fill", "none") 
    .attr("stroke", "maroon") 
    .attr("stroke-width", 2) 
    .attr("d", line); 

// x-axis label 
chart.append("text") 
    .attr("class", "x label") 
    .attr("text-anchor", "end") 
    .attr("x", width) 
    .attr("y", height - 6) 
    .text("time"); 

// y-axis label 
chart.append("text") 
    .attr("class", "y label") 
    .attr("text-anchor", "end") 
    .attr("y", 6) 
    .attr("dy", ".75em") 
    .attr("transform", "rotate(-90)") 
    .text("value"); 

// x-axis 
var xaxis = chart.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

// y-axis 
var yaxis = chart.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 



function redraw() 
{ 
    console.log("here", d3.event.translate, d3.event.scale); 

    path.transition()  
     .ease("linear") 
     .attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); 

} 

Answer 1

당신이 뭔가를 원하는 :

• 'clip-rect'대신 'clip'을 사용하십시오.
• 'g'요소 안에 클립을 넣으려는 내용을 넣고 'g'요소의 'clip-path'속성과 변환을 지정하십시오.