剪輯路徑由一組正方形組成

我有這個situation，我可以在d3中的剪輯路徑下分組更多的元素嗎？我想要有更多的方塊讓綠線變成綠色。我嘗試了各種各樣的東西，但都沒有工作。剪輯路徑由一組正方形組成

<!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>

來源

2016-07-29 Omar Lo

我無法弄清楚你的要求。如果你想要更多的剪輯路徑只是創建更多的剪輯路徑... – Mark

聽起來像是你想使你的剪輯路徑數據驅動的：

<!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>

來源

2016-07-29 16:52:54 Mark

謝謝標記這正是我正在尋找！感謝這個答案以及我爲了更好地理解代碼所做的一些研究，我還更好地理解了enter（）的工作方式以及此函數在d3中的功能。對不起，我的英語不好，並感謝你的代碼格式我真的很感謝你的幫助，我會盡力幫助更多以及在stackoverflow :-) –

剪輯路徑由一組正方形組成

回答

相關問題