d3.jsウォーターチャートのバグ

Question

私は、サークルグラフを使用したウォーターチャートを長方形のバーに派生させましたが、クリッピングパスはチャートの高さ全体を占めていません。

//問題

1. The axis text does not wrap cleanly -- I need it to do so to make it legible. 
2. The rectangle is more of a square -- it needs to be more "bar chart" like - consume more vertical space but render correctly. 

- これら2 jsfiddlesの違いは、単にconfig1.fillShapeパラメータです。 - RECT /円

//壊れバーバージョン

http://jsfiddle.net/0ht35rpb/132/

//古いラウンドゲージのバージョン

http://jsfiddle.net/0ht35rpb/133/

クリップ領域のためのコア機能作業 - clipAreaをし、 drawShapeWave

clipArea関数

// The clipping wave area. 
    const clipArea = d3.area() 
    .x(function(d) { 
     return waveScaleX(d.x); 
    }) 
    .y0(function(d) { 
     return waveScaleY(Math.sin(Math.PI * 2 * config.waveOffset * -1 + Math.PI * 2 * (1 - config.waveCount) + d.y * 2 * Math.PI)); 
    }); 

    if (config.fillShape == "circle") { 
    clipArea 
     .y1(function(d) { 
     return (fillCircleRadius * 2 + waveHeight); 
     }); 
    } else { 
    clipArea 
     .y1(function(d) { 
     return (fillCircleRadius * 2 + waveHeight); 
     }); 
    //.y1(function(d) { return (config.height - (fillCircleRadius * 2) + waveHeight); }); 
    } 

と行うdrawShape

var drawShapeWave = function(shape) { 
    // Draw the wave shape. 

    if (shape == "circle") { 
     fillGroup.append("circle") 
     .attr("cx", radius) 
     .attr("cy", radius) 
     .attr("r", fillCircleRadius); 
    } else { 
     fillGroup.append("rect") 
     .attr("x", radius - fillCircleRadius) 
     .attr("y", radius - fillCircleRadius) 
     .attr("width", fillCircleRadius * 2) 
     .attr("height", fillCircleRadius * 2) 
     //.attr("height", config.height - (fillCircleRadius * 2)); 
    } 

    fillGroup 
     .style("fill", config.waveStartColor) 
     .transition() 
     .duration(config.waveColorDuration) 
     .style("fill", config.waveColor); 
    } 

//多分このコードサンプルは、ソリューションを持っています。

http://jsfiddle.net/NYEaX/1860/

---

更新

私はバージョンを作成しましたちょうど正方形の水チャート自体

http://jsfiddle.net/0ht35rpb/141/

---

を残すためにいくつかのコードを取り除かました半径は高さの半分です - 右にこれは非常にきれいではありません - そして、まだクリッピングパスを適切に制御することに少しばかげています。

http://jsfiddle.net/0ht35rpb/145/

---

アップデート2 - 2017年12月9日

Iは、容器と別個G要素における波を配置した - それは幅70〜90から安定したと思われます - しかし、それを超えてそれは壊れ始める..何が間違っているのか解読できれば - 十分に文書化された答えを提供する - 賞金はあなたのものです。

http://jsfiddle.net/0ht35rpb/165

Answer 1

あなたのクリッピングパス、最新のバリアント（jsfiddleで四角形を作ることができます。（SOクリップパスは小さい面積を有する）、xに値を追加

fillGroup.append("rect") 
    .attr("x", config.width-5) 
    .attr("y", 0) 
    .attr("width", config.width) 
    .attr("height", config.height) 

クリップパスのためのマージンを追加するには、：あなたの長方形として設定と同じ値を用いてネット/ 0ht35rpb/145） y、幅、高さ：

fillGroup.append("rect") 
    .attr("x", config.width - 5 + config.margin) 
    .attr("y", config.margin) 
    .attr("width", config.width - 2 * config.margin) 
    .attr("height", config.height - 2 * config.margin) 

これで問題が解決します。