Edit Question - KnowledgeHub

Title Body

I have a simple graph with x and y axes. I don't want the drawing area I draw within to overlap the axes. I'm using d3 to create my chart but the clip-path does not work: 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") .a

Tags (comma-separated) Cancel