javascript - d3棒グラフに何も追加できません

Question

これは、私の棒グラフの簡略化された、一般向けのバージョンです。何も追加できないようです。このチュートリアルに従って、x軸からの垂直線と、各バー内のテキストをグラフに追加しようとしましたが、どちらも表示されていません。基本的に、追加しようとすると実際には何も表示されませんが、graph.js @line65で確認できるx軸線を追加できました。行のコードでグラフに線を追加しようとした場所を確認できます。 graph.jsの56。x値は、表示させようとしただけなので任意です。私は何が間違っているのですか？

Answer 1

問題は、セレクターの「行」が十分に具体的でないことです。ドキュメントにはすでに「line」要素があります。それらは軸ティックを形成します。

そのため、コードは次のことを行っています。既存の線要素を選択し、提供したデータをそれらの要素にバインドします。これらの要素はすでに存在しているため、enter（）の選択は空になります。これは、append（ "line"）コマンドが実行されないことを意味します。

        var lines = svg.selectAll("line")
            .data(data)
            .enter().append("line")

クラスを追加することで、より具体的にすることができます。たとえば、次のように機能するはずです。

var lines = svg.selectAll("line.rules")
    .data(data)
  .enter().append("line")
    .attr("class", "rules");

入力、更新、および終了の選択の詳細については、Mikeの記事ThinkingwithJoinsを参照してください。