d3.js v4のジョイントポイントで2つの曲線を滑らかにする方法は？

私は最初の目標を解決し、最後の点を破線でつなぎ、残りの曲線は実線でつなぎます（画像参照）。d3.js v4のジョイントポイントで2つの曲線を滑らかにする方法は？

しかし、以下のようにすると、カーブの滑らかさが失われました。これにどのように対処しますか？

さらに、HTML5のようにスタイルを持つために必要なことは、クラスを置き換えますか？（円はスタイル属性として赤いストロークを持ちますが、青のクラスを獲得します）。私のコメントに関して

// curve 
    self.svg.append("path") 
    .datum(function() {return data.slice(0,data.length-1);}) 
     .attr("stroke", colors(i)) 
     .attr("class", "line ") 
     .attr("d", d3.line() 
      .curve(d3.curveCatmullRom) 
      .x(function(d) { return self.xSales(d.period) + self.xSales.bandwidth()/2;}) 
      .y(function(d) { return self.ySales(v(d)); }) 
     ); 

    self.svg.append("path") 
    .datum(function() {return data.slice(data.length-2, data.length);}) 
     .attr("stroke", colors(i)) 
     .attr("class", "line currentPeriod") 
     .attr("d", d3.line() 
      .curve(d3.curveCatmullRom) 
      .x(function(d) { return self.xSales(d.period) + self.xSales.bandwidth()/2;}) 
      .y(function(d) { return self.ySales(v(d)); }) 
     );

出典

2017-02-16 Stéphane de Luca

あなたの2番目の質問に答えるためには、 '.style（「ストロークを使用し、...' '代わりの.attr'それはなるだろうCSSと同じように動作します。最初の質問では、単一のパスを生成し、 'ダッシュオフセット 'とグラデーションカラーを使用する必要があります。 – Mark

：あなたの最初の質問については

、あなたは、単一のパスと使用ダッシュオフセットと勾配の色を生成する必要があります。

単一パスのセクションをダッシュする方法については、かなり良い回答hereを提供しましたが、色は提供されません。だから私はそれについては、以下を更新しました：

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

 
<body> 
 
    <script src="//d3js.org/d3.v3.min.js"></script> 
 
    <script> 
 
    var margin = { 
 
     top: 20, 
 
     right: 20, 
 
     bottom: 30, 
 
     left: 50 
 
     }, 
 
     width = 960 - margin.left - margin.right, 
 
     height = 500 - margin.top - margin.bottom; 
 

 
    var data = d3.range(11).map(function(d, i) { 
 
     return { 
 
     x: i, 
 
     y: Math.random() * 100 
 
     }; 
 
    }); 
 

 
    var x = d3.scale.linear() 
 
     .range([0, width]) 
 
     .domain([0, 10]); 
 

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

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

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

 
    var line = d3.svg.line() 
 
     .x(function(d) { 
 
     return x(d.x); 
 
     }) 
 
     .y(function(d) { 
 
     return y(d.y); 
 
     }) 
 
     .interpolate("basis"); 
 

 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", width + margin.left + margin.right) 
 
     .attr("height", height + margin.top + margin.bottom) 
 
     .append("g") 
 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 
     
 
    var lG = svg.append("defs") 
 
     .append("linearGradient") 
 
     .attr("id", "lineColor") 
 
     .attr("x1", "0%") 
 
     .attr("x2", "100%") 
 
     .attr("y1", "0%") 
 
     .attr("y2", "0%"); 
 
    
 
    lG.append("stop") 
 
     .attr("offset", "0") 
 
     .attr("stop-color", "steelblue"); 
 
     
 
    svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(xAxis); 
 

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

 
    var p = svg.append("path") 
 
     .datum(data) 
 
     .attr("class", "line") 
 
     .attr("stroke", "url(#lineColor)") 
 
     .attr("d", line); 
 

 
    // draw dashed from 2.7 to 7 in the X domain 
 
    var dashBetweenX = [2.5, 7] 
 
    path = p.node(), 
 
     totalLen = path.getTotalLength(); 
 

 
    // find the corresponding line lengths 
 
    var dashBetweenL = dashBetweenX.map(function(d, i) { 
 

 
     var beginning = 0, 
 
     end = totalLen, 
 
     target = null, 
 
     d = x(d); 
 

 
     // find the line lengths the correspond to our X values 
 
     // stolen from @duopixel from http://bl.ocks.org/duopixel/3824661 
 
     while (true) { 
 
     target = Math.floor((beginning + end)/2); 
 
     pos = path.getPointAtLength(target); 
 
     if ((target === end || target === beginning) && pos.x !== d) { 
 
      break; 
 
     } 
 
     if (pos.x > d) end = target; 
 
     else if (pos.x < d) beginning = target; 
 
     else break; //position found 
 
     } 
 

 
     return target; 
 
    }) 
 

 
    var sd = dashBetweenL[0], 
 
     dp = dashBetweenL[0], 
 
     count = 0; 
 
    while (dp < dashBetweenL[1]) { 
 
     count++; 
 
     dp += 4; 
 
     sd += ", 4"; 
 
    } 
 

 
    if (count % 2 == 0) { 
 
     sd += ", 4, " + (totalLen - dashBetweenL[1]); 
 
    } else { 
 
     sd += ", " + (totalLen - dashBetweenL[1]); 
 
    } 
 
    p.attr("stroke-dasharray", sd); 
 
    
 
    lG.append("stop") 
 
     .attr("offset", dashBetweenX[0]/x.domain()[1]) 
 
     .attr("stop-color", "steelblue"); 
 
    
 
    lG.append("stop") 
 
     .attr("offset", dashBetweenX[0]/x.domain()[1] + 0.001) 
 
     .attr("stop-color", "red"); 
 
     
 
    lG.append("stop") 
 
     .attr("offset", dashBetweenX[1]/x.domain()[1]) 
 
     .attr("stop-color", "red"); 
 
     
 
    lG.append("stop") 
 
     .attr("offset", dashBetweenX[1]/x.domain()[1] + 0.001) 
 
     .attr("stop-color", "steelblue"); 
 
     
 
    lG.append("stop") 
 
     .attr("offset", '1') 
 
     .attr("stop-color", "steelblue"); 
 
    
 
    </script> 
 
</body> 
 

 
</html>

出典

2017-02-16 16:24:32 Mark

d3.js v4のジョイントポイントで2つの曲線を滑らかにする方法は？

答えて

関連する問題