Clip-Pfad durch eine Gruppe von Quadraten in einer Gruppe

Ich habe diese situation, kann ich mehr Elemente unter einem Clip-Pfad in d3? Ich hätte gerne mehr Quadrate, die die Linie grün machen. Ich habe verschiedene Dinge ausprobiert, aber keiner von ihnen hat funktioniert.Clip-Pfad durch eine Gruppe von Quadraten in einer Gruppe

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 

 
body { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.line { 
 
    fill: none; 
 
    stroke: steelblue; 
 
    stroke-width: 1.5px; 
 
} 
 

 
.dot { 
 
    fill: white; 
 
    stroke: steelblue; 
 
    stroke-width: 1.5px; 
 
} 
 

 
</style> 
 
<body> 
 
<script src="//d3js.org/d3.v3.min.js"></script> 
 
<script> 
 
//def variabili 
 
var width = 960, 
 
height = 500; 
 
//data 
 
var data = [ 
 
    [new Date(2001, 0, 1), 1], 
 
    [new Date(2002, 0, 1), 2], 
 
    [new Date(2003, 0, 1), 2], 
 
    [new Date(2004, 0, 1), 3], 
 
    [new Date(2005, 0, 1), 4], 
 
    [new Date(2006, 0, 1), 5] 
 
]; 
 
//margin 
 
var margin = {top: 20, right: 30, bottom: 30, left: 40}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 
//assi 
 
var x = d3.time.scale() 
 
    .domain([new Date(2001, 0, 1), new Date(2006, 0, 1)]) 
 
    .range([0, width]); 
 

 
var y = d3.scale.linear() 
 
    .domain([0, 6]) 
 
    .range([height, 0]); 
 

 
var xAxis = d3.svg.axis() 
 
    .scale(x) 
 
    .orient("bottom"); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left"); 
 

 
var line = d3.svg.line() 
 
    .interpolate("monotone") 
 
    .x(function(d) { return x(d[0]); }) 
 
    .y(function(d) { return y(d[1]); }); 
 
//Append svg canvas 
 
var svg = d3.select("body").append("svg") 
 
    .datum(data) 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 

 

 
var defs = svg.append("defs"); 
 

 
    defs.append("clipPath") 
 
    .attr("id", "area") 
 
    .append("rect") 
 
    .attr("x", 250) 
 
    .attr("y", 220) 
 
    .attr("width", 150) 
 
\t .attr("height", 100); 
 

 
//plot axis 
 
svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
svg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis); 
 

 
//plot rect 
 
svg.append("rect") 
 
.attr("x", 250) 
 
.attr("y", 220) 
 
.attr("width", 150) 
 
.attr("height", 100) 
 
.style("fill", "yellow"); 
 

 
//plot line 
 
svg.append("path") 
 
.attr("class", "line") 
 
.attr("width", width) 
 
.attr("height", height) 
 
.style("stroke", "red") 
 
.attr("d", line); 
 

 
//plot line overlay 
 
svg.append("path") 
 
    .attr("class", "line") 
 
    .attr("clip-path", "url(#area)") 
 
.style("stroke", "green") 
 
.style("stroke-width", "3") 
 
    .attr("d", line); 
 

 

 
</script>

Quelle

2016-07-29 Omar Lo

ich nicht herausfinden können, was Sie fordern. Wenn Sie mehr Clip-Pfade möchten, erstellen Sie einfach mehr Clip-Pfade ... – Mark

Klingt wie Sie Ihren Clip-Pfade Daten getrieben machen wollen:

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
    body { 
 
    font: 10px sans-serif; 
 
    } 
 
    .axis path, 
 
    .axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
    } 
 
    .line { 
 
    fill: none; 
 
    stroke: steelblue; 
 
    stroke-width: 1.5px; 
 
    } 
 
    .dot { 
 
    fill: white; 
 
    stroke: steelblue; 
 
    stroke-width: 1.5px; 
 
    } 
 
</style> 
 

 
<body> 
 
    <script src="//d3js.org/d3.v3.min.js"></script> 
 
    <script> 
 
    //def variabili 
 
    var width = 960, 
 
     height = 500; 
 
    //data 
 
    var data = [ 
 
     [new Date(2001, 0, 1), 1], 
 
     [new Date(2002, 0, 1), 2], 
 
     [new Date(2003, 0, 1), 2], 
 
     [new Date(2004, 0, 1), 3], 
 
     [new Date(2005, 0, 1), 4], 
 
     [new Date(2006, 0, 1), 5] 
 
    ]; 
 
    //margin 
 
    var margin = { 
 
     top: 20, 
 
     right: 30, 
 
     bottom: 30, 
 
     left: 40 
 
     }, 
 
     width = 960 - margin.left - margin.right, 
 
     height = 500 - margin.top - margin.bottom; 
 
    //assi 
 
    var x = d3.time.scale() 
 
     .domain([new Date(2001, 0, 1), new Date(2006, 0, 1)]) 
 
     .range([0, width]); 
 

 
    var y = d3.scale.linear() 
 
     .domain([0, 6]) 
 
     .range([height, 0]); 
 

 
    var xAxis = d3.svg.axis() 
 
     .scale(x) 
 
     .orient("bottom"); 
 

 
    var yAxis = d3.svg.axis() 
 
     .scale(y) 
 
     .orient("left"); 
 

 
    var line = d3.svg.line() 
 
     .interpolate("monotone") 
 
     .x(function(d) { 
 
     return x(d[0]); 
 
     }) 
 
     .y(function(d) { 
 
     return y(d[1]); 
 
     }); 
 

 
    //Append svg canvas 
 
    var svg = d3.select("body").append("svg") 
 
     .datum(data) 
 
     .attr("width", width + margin.left + margin.right) 
 
     .attr("height", height + margin.top + margin.bottom) 
 
     .append("g") 
 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    
 
    var clips = [ 
 
     { 
 
     x: 250, 
 
     y: 250, 
 
     width: 150, 
 
     height: 150 
 
     },{ 
 
     x: 100, 
 
     y: 300, 
 
     width: 50, 
 
     height: 50 
 
     },{ 
 
     x: 700, 
 
     y: 100, 
 
     width: 50, 
 
     height: 50 
 
     } 
 
     
 
    ];  
 
    
 
    var defs = svg.append("defs"); 
 

 
    defs.selectAll("clipPath") 
 
     .data(clips) 
 
     .enter() 
 
     .append("clipPath") 
 
     .attr("id", function(d,i){ 
 
     return "area-" + i; 
 
     }) 
 
     .append("rect") 
 
     .attr("x", function(d){ 
 
     return d.x; 
 
     }) 
 
     .attr("y", function(d){ 
 
     return d.y; 
 
     }) 
 
     .attr("width", function(d){ 
 
     return d.width; 
 
     }) 
 
     .attr("height", function(d){ 
 
     return d.height; 
 
     }); 
 

 
    //plot axis 
 
    svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(xAxis); 
 

 
    svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxis); 
 

 
    //plot line 
 
    svg.append("path") 
 
     .attr("class", "line") 
 
     .style("stroke", "red") 
 
     .attr("d", line); 
 

 
    //plot line overlay 
 
    svg.selectAll(".clipped") 
 
     .data(d3.range(clips.length)) 
 
     .enter() 
 
     .append("path") 
 
     .attr("class", "clipped") 
 
     .attr("clip-path", function(d){ 
 
     return "url(#area-" + d + ")"; 
 
     }) 
 
     .style("stroke", "green") 
 
     .style("stroke-width", "3") 
 
     .style("fill", "none") 
 
     .attr("d", line(data)); 
 
    
 
    </script>

Quelle

2016-07-29 16:52:54 Mark

Danke Mark Das war genau das was ich gesucht habe! Und dank dieser Antwort und einiger Nachforschungen, die ich gemacht habe, um Ihren Code besser zu verstehen, habe ich auch besser verstanden, wie enter() funktioniert und wie viel Energie diese Funktion in d3 hat. P. Sorry für mein schlechtes Englisch, und danke für die Code Formatierung, ich schätze deine Hilfe sehr und ich werde versuchen, auch mehr auf stackoverflow zu helfen :-) –

Clip-Pfad durch eine Gruppe von Quadraten in einer Gruppe

Antwort

Verwandte Themen