D3 v4のオブジェクトでattrを使用することはできません

Cannot use attr with an object in D3 v4


質問 written by Gerardo Furtado @2018-09-22 06:06:06Z

: 9 : 1 : 4

私は新しいD3 v4でAngular2コンポーネントに素敵なD3チャートの例( https://jsfiddle.net/thudfactor/HdwTH/ )を変換しようとしています

しかし、次のコードで "nullのプロパティテキストを読み取れません"という例外が発生します。

var textLabels = labelGroups.append("text").attr({
    x: function (d, i) {
        var centroid = pied_arc.centroid(d);
        var midAngle = Math.atan2(centroid[1], centroid[0]);
        var x = Math.cos(midAngle) * cDim.labelRadius;
        var sign = (x > 0) ? 1 : -1
        var labelX = x + (5 * sign)
        return labelX;
    },
    y: function (d, i) {
        var centroid = pied_arc.centroid(d);
        var midAngle = Math.atan2(centroid[1], centroid[0]);
        var y = Math.sin(midAngle) * cDim.labelRadius;
        return y;
    },
    'text-anchor': function (d, i) {
        var centroid = pied_arc.centroid(d);
        var midAngle = Math.atan2(centroid[1], centroid[0]);
        var x = Math.cos(midAngle) * cDim.labelRadius;
        return (x > 0) ? "start" : "end";
    },
    'class': 'label-text'
}).text(function (d, i) {      <--------------- exception
    return d.data.label;
});

labelgroupsは選択であり、appendが機能するはずなので、問題を起こしているのは.attr({})でなければなりません。 しかしjsfiddleではうまくいきます。
この構文はD3 v4で変更されましたか? それはどのように正しいですか?

ありがとうございます。

回答 1 written by Gerardo Furtado @2018-08-29 15:24:52Z
22

D3 v4(およびv5も同様)では、オブジェクトを使ってattrstyleを設定することはできません そのためには、ミニライブラリD3-selection-multiを参照する必要があります。

<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

それが終わったら、コードをattrからattrsに変更します(はい、複数形のように)。

After doing that, change your code from attr to attrs (yes, like a plural):

スタイルについても同じことをしてください。 styleではなく、複数形としてのstylesであるべきstyles

これらすべてを変更したくない場合は、単に「通常の」方法として行ってくださいxytext-anchor 、およびclassを別々のattrます。

これがselection-multiドキュメントです。https : //github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs

コメント 1

あなたthe "regular" way: set x, y例を示すことができますthe "regular" way: set x, yありがとうございます。

written by Honghe.Wu @2018-07-12 11:19:09Z

コメント 2

@ Honghe.Wuは、次のようになります。selection.attr selection.attr("x", foo).attr("y", bar).attr("text-anchor", baz).attr("class", foobar);

written by Gerardo Furtado @2018-07-12 11:20:37Z