前提・実現したいこと
D3にて棒グラフ、円グラフをブラウザ上に並べて表示させたいのですが、
なぜか、下記のコードではグラフが重ねて表示されます。
SVGにお詳しい方、ご教示頂けますと幸いです。よろしくお願い致します。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <!--グラフスタイル--> <style> #test1{ background-color: #f8dce0; } #test2{ background-color: #ff0000; } </style> </head> <body> <!-- 棒グラフ --> <script src="https://d3js.org/d3.v4.min.js"></script> <svg width="400" height="400" id="test1" class="1"></svg> <script> var svg1 = d3.select("svg"), margin = 150, width = svg1.attr("width") - margin, height = svg1.attr("height") - margin svg1.append("text") .attr("transform", "translate(100,0)") .attr("x", 45) .attr("y", 45) .attr("font-size", "20px") .text("棒グラフ") var xScale = d3.scaleBand().range([0, width]).padding(0.4), yScale = d3.scaleLinear().range([height, 0]); var g1 = svg1.append("g") .attr("transform", "translate(" + 100 + "," + 100 + ")"); d3.csv("XYZ.csv", function(error, data) { if (error) { throw error; } xScale.domain(data.map(function(d) { return d.year; })); yScale.domain([0, d3.max(data, function(d) { return d.value; })]); g1.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)) .append("text") .attr("y", height - 250) .attr("x", width - 100) .attr("text-anchor", "end") .attr("stroke", "black") g1.append("g") .call(d3.axisLeft(yScale).tickFormat(function(d){ return d; }) .ticks(10)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "-5.1em") .attr("text-anchor", "end") .attr("stroke", "black") g1.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return xScale(d.year); }) .attr("y", function(d) { return yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return height - yScale(d.value); }); }); </script> <!-- 棒グラフEND --> <!-- 円グラフ --> <script src="https://d3js.org/d3.v4.min.js"></script> <svg width="400" height="400" id="test2" class="2"></svg> <script> var svg2 = d3.select("svg"), width = svg2.attr("width"), height = svg2.attr("height"), //円の大きさ radius = Math.min(width, height) / 2.5; var g2 = svg2.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var color = d3.scaleOrdinal(["#ff7f7f", "#7fbfff", "#7fffff", "#7fffbf", "#7fff7f", "#bfff7f", "#ffff7f","#ffbf7f", "#ff7fbf", "#ff7fff", "#bf7fff", "#7f7fff"]); var pie = d3.pie().value(function(d) { return d.percent; }); //文字の位置1 var path = d3.arc() .outerRadius(radius - 10) .innerRadius(radius - 80); //文字の位置2 var label = d3.arc() .outerRadius(radius) .innerRadius(radius - 100); d3.csv("browseruse.csv", function(error, data) { if (error) { throw error; } var arc = g2.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); arc.append("path") .attr("d", path) .attr("fill", function(d) { return color(d.data.browser); }); console.log(arc) arc.append("text") .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) .attr("dy", ".40em") .text(function(d) { return d.data.browser; }); arc.append("text") .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) .attr("dy", "-1.0em") .text(function(d) { return d.data.percent; }); }); //タイトルの設定 svg2.append("g") //文字位置 .attr("transform", "translate(" + (width / 2 - 50) + "," + 30 + ")") .append("text") .attr("class", "title") .attr("font-size", "20px") .text("円グラフ") </script> <!-- 円グラフEND --> </script> </body> </html>
試したこと
svgにクラスを指定したり、divで囲ったり、
該当グラフコードをsvgで囲ったりしてみましたが、重ねて表示される
現状は解消されませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/18 05:54