1

私の質問はおそらく言い回しが不十分です。編集していただけます。

私の問題は単純です。d3を使用してプレーンHTMLでタイムラインを作成しています。タイムラインアイテム（ここの記事）はすべて固定の高さ（たとえば100px）ですが、次のように重ならないようにする必要があります。

重複する記事（悪い）

ここには4つの記事があり、ご覧のとおり、判読できません。私は問題が何であるかを知っていますが、それを解決する方法がわかりません。これが私のコードです：

height = data.length * (articleHeight + margin * 2)

timeScale
    .range([height, 0])
    .domain(d3.extent(data, (d) -> timeFormat.parse(d.date)))

div = selection.selectAll(".article").data(data)

div.enter().append("div")
    .attr("class", "article")
    .html(divHTML)
    .style("top", "0")

div.transition().duration(2000)
    .style("top", (d) -> d3.round(timeScale(timeFormat.parse(d.date))) + "px")

高さの計算方法が悪いです。ダニを調べましたが、それは軸を生成するためのものですよね？1日または3日のティックを追加しようとしましたが、変更されません（当然のことながら）。

念のためのCSV：

date,title,excerpt
2012-08-13,Most recent article,loremasdjf asdflkasfdlaksjdflasdf kjlasdhflkj asdflkja sdklfjhaskdljhfaskdljhfaskldjhf alksjhdf kaljsd fkljas dfkljash dkfaslkdfj
2012-08-4,Second Most recent article,loremasdjf asdflkasfdlaksjdflasdf kjlasdhflkj asdflkja sdklfjhaskdljhfaskdljhfaskldjhf alksjhdf kaljsd fkljas dfkljash dkfaslkdfj
2012-07-15,"July article, bro",loremasdjf asdflkasfdlaksjdflasdf kjlasdhflkj asdflkja sdklfjhaskdljhfaskdljhfaskldjhf alksjhdf kaljsd fkljas dfkljash dkfaslkdfj
2012-01-16,First article of 2012,loremasdjf asdflkasfdlaksjdflasdf kjlasdhflkj asdflkja sdklfjhaskdljhfaskdljhfaskldjhf alksjhdf kaljsd fkljas dfkljash dkfaslkdfj

編集：1日に複数の記事が存在する可能性があります。

4

2 に答える 2

1

問題は確かに高さの計算にあります。計算しているのは、N個の記事に必要な高さです。ここで、Nはデータ内の記事の数です。ただし、スケールを作成するときは、最も早い日付から最も遅い日付までの範囲を計算します。したがって、最初のデータ項目が2012年1月1日からのもので、最後のデータ項目が2012年1月31日からのものである場合、範囲は30になります（または31が遅すぎて確認できません）。

したがって、基本的に行うべきことは、タイムスケールでd3.extent計算を再利用して、高さを計算することです。

更新：わかりました。では、これについて少し詳しく説明します。必要なのは重複しない記事です。したがって、最小の商品の高さを指定します。timeScaleにd3.time.scaleを使用していると仮定します（これは正しい方法です）。このスケールでは、ドメインを次のように（正しく）設定します。

   .domain(d3.extent(data, (d) -> timeFormat.parse(d.date)))

d3.extent関数は、最も早い日付と最も遅い日付の場合に、最小値と最大値を提供します。ここで、必要な高さを計算するには、表示される可能性のある記事の最大数を考慮する必要があります。これは、次のように計算された最初の日付から最後の日付までの日数です（1日あたり最大1つの記事を想定）。 d3.extent。これを行うには、最小値と最大値の間の日数を計算する必要があります。

ここでこの計算を示すjsfiddleが設定されています：http：//jsfiddle.net/EA5rP/14/

于 2012-10-02T10:10:17.577 に答える
1

私は修正を見つけましたが、それは理想的ではありません。誰かがそれを有用だと思った場合に備えて、私はまだそれをここに置いています。スケールの値を使用する代わりに、記事の長さ（実際には少し少ないですが…理想的ではないと言っています）に、すでに表示されている記事の数を掛けます。エレガントとはほど遠いですが、今のところ機能します。記事が重複することはありません。

div.transition().duration(2000)
    .style("top", (d, i) ->
        d3.round(timeScale(timeFormat.parse(d.date))) + i * articleHeight + "px")
于 2012-10-02T20:16:32.430 に答える