14

d3 を使用して単純な折れ線グラフを作成しようとしていますが、何らかの理由で線と中間点の間が塗りつぶされています。出力は次のとおりです。

折れ線グラフ

私のjavascriptは次のとおりです。

        var width = 500,
            height = 500,
            padding = 10;

        var extentVisits = d3.extent(visits, function(obj){
            return obj['visits'];
        });

        var extentDates = d3.extent(visits, function(obj){
            return obj['datestamp'];
        });

        var yScale = d3.scale.linear()
            .domain(extentVisits)
            .range([height - padding, padding]);

        var xScale = d3.time.scale()
            .domain(extentDates)
            .range([0, width]);

        var line = d3.svg.line()
            .x(function(d) {
                return xScale(d['datestamp']);
            })
            .y(function(d) {
                return yScale(d['visits']);
            })

        d3.select('#chart')
            .append('svg')
            .attr('width', width)
            .attr('height', height)
            .append("g")
            .attr("transform", "translate(5,5)")
            .append('path')
            .datum(visits)
            .attr("class", "line")
            .attr('d', line);

訪問数の形式は次のとおりです。

        visits = [{'datestamp': timestampA, 'visits': 1000},
                  {'datestamp': timestampB, 'visits': 1500}]

私はd3でかなり新しいので、それは単純なことだと確信していますが、それは私を夢中にさせています.

前もって感謝します。

4

1 に答える 1

22

あなたが見ている中点は、最初と最後の点の接続です。これは、作成したパスが (デフォルトで) 黒く塗りつぶされているためです。開いたパス (つまり、最初と最後の点が実際には接続されていない) であっても、塗りつぶされていると、閉じているように見えます。

フィル操作は、サブパスの最後のポイントをサブパスの最初のポイントに接続するために追加の「closepath」コマンドがパスに追加されたかのようにフィル操作を実行することにより、開いているサブパスを埋めます。

出典:この SO 回答によるSVG 仕様

ここでの解決策は、塗りつぶしをなくし、代わりに線を設定することです。これは、d3 を使用して JS で直接行うか、CSS を介して行うことができます。

path.line
{
    fill: none;
    stroke: #000;
}

jsFiddle での CSS と JS メソッド (コメント アウト) の両方を示すデモ

于 2013-02-08T04:38:35.377 に答える