D3の旅を始めたばかりで、グラフの周りに1pxの小さな枠線を作成する方法について質問したいと思っていました。D3グラフの周りに枠を作成する
変数 "border"と "bordercolor"を作成してから、自分のコードのvar svg = d3.select( "body")部分に.attr( "border"、border)を追加しました。それはクラッシュしないが、私は国境もない。
私はこの境界をどのように追加するのでしょうか、誰かが私がしたことがなぜ間違っているのか説明できるかどうかということです。
<script type="text/javascript">
//Width and height
var w = 800;
var h = 400;
var padding = 20;
var border=1;
var bordercolor='black';
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[-50,-100],[50,-45],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],[-480, 90], [3,-90]
];
// create scale functions
var xScale = d3.scale.linear()
.domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain( [-100, d3.max(dataset, function(d) { return d[1]; })] )
.range([2,5]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("border",border)
;
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", 3);
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
</script>
はなく、国境に、すべての要素に適用されました。私はK.Kのソリューションを使用しなければなりませんでした。しかし、javascriptコードではなくCSSファイルで行います。スタイルと属性を分ける方が良いでしょう。または、少なくともこの答えのような.styleを使用してください。 – peter