svg.append("text")
.attr("x", width / 2 )
.attr("y", 0)
.style("text-anchor", "middle")
.style("font-size",12)
.text("Title of Diagram");
単一のスタイルのみを使用し、その中にすべてのCSSプロパティを設定したかったのです。
例えば
.style（properties）
次に例を示します.style()。d3.jsV3を使用してスタイルオブジェクトを関数に渡すことができます。
const width = 200;
const svg = d3.select('svg')
.attr('width', '100%')
.attr('viewBox', `0 0 ${width} ${width}`);
svg.append("text")
.attr("x", width / 2 )
.attr("y", 0)
.style({
'alignment-baseline': "hanging",
"text-anchor": "middle",
"font-size": 12,
})
.text("Title of Diagram");<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<svg>
</svg>V4とV5では、d3.jsチームはこのいわゆる「d3-selection-multi」機能をメインディストリビューションから分割しましたが、このモジュールを含めて次のように使用することもできます。
注：あなたがから変更する必要がある.style()と.styles({...})
注：この「d3-selection-multi」モジュールを使用すると、オブジェクトに複数の属性を設定することもできます。 .attrs({...})
注：これをデータバインディングと組み合わせることもできます
const width = 200;
const svg = d3.select('svg')
.attr('width', '100%')
.attr('viewBox', `0 0 ${width} ${width}`);
svg.append("text")
.attrs({
"x": width / 2,
"y": 0
})
.styles({
'alignment-baseline': "hanging",
"text-anchor": "middle",
"font-size": 12,
})
.text("Title of Diagram");<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> -->
<script src="https://d3js.org/d3-selection-multi.v1.min.js">
</script>
<svg>
</svg>最後のオプションは、スタイル文字列をに直接渡すことです.attr()が、もちろんこれはスタイル属性全体を文字列で上書きするため、1つの要素で2回使用することはできません。
const width = 200;
const svg = d3.select('svg')
.attr('width', '100%')
.attr('viewBox', `0 0 ${width} ${width}`);
svg.append("text")
.attr('x', width / 2)
.attr('y', 0)
.attr('style',
`alignment-baseline: hanging;
text-anchor: middle;
font-size: 12;`
)
.text("Title of Diagram");<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
</svg>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加