2つのd3グラフを隣り合わせに表示させるにはどうすればよいですか？

Question

私はbar1とbar2という2つのdivを互いに隣り合って表示させようとしています。私はsvgとdiv idsを少し混乱させてみました。この2つのグラフをどのように並べて表示するかはわかりません。ここで

はBAR1は次のとおりです。

var chart2 = d3.select("#bar2") 
    .append("svg") 
    .attr('id', 'bar2svg') 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom); 

    var g2 = chart2.append("g2") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("data/housingdata2.csv", function(d) { 
d.median_housing_prices = +d.median_housing_prices; 
return d; 
    }, function(error, data) { 
    if (error) throw error; 

x.domain(data.map(function(d) { return d.neighborhoods; })); 
y.domain([0, d3.max(data, function(d) { return d.median_housing_prices; })]); 

g2.append("g2") 
    .attr("class", "axis axis--x") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)); 

g2.append("g2") 
    .attr("class", "axis axis--y") 
    .call(d3.axisLeft(y).ticks(10, 's')) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", "0.71em") 
    .attr("text-anchor", "end") 
    .text("Frequency"); 

g2.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.neighborhoods); }) 
    .attr("y", function(d) { return y(d.median_housing_prices); }) 
    .attr("width", x.bandwidth()) 
    .attr("height", function(d) { return height - y(d.median_housing_prices); }); 
}); 

：ここ

var margin = {top: 20, right: 20, bottom: 30, left: 40}; 

    var width = 360 - margin.left - margin.right, 
    height = 330 - margin.top - margin.bottom; 

    var chart1 = d3.select("#bar1") 
    .append("svg") 
    .attr('id', 'bar1svg') 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom); 

    var svg = d3.select("#bar1svg"); 

    var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), 
    y = d3.scaleLinear().rangeRound([height, 0]); 

var g = chart1.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top +  ")"); 

d3.csv ("data/housingdata.csv", function(d) { 
    d.median_housing_prices = +d.median_housing_prices; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

x.domain(data.map(function(d) { return d.neighborhoods; })); 
y.domain([0, d3.max(data, function(d) { return  d.median_housing_prices; })]); 

g.append("g") 
    .attr("class", "axis axis--x") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)); 

g.append("g") 
    .attr("class", "axis axis--y") 
    .call(d3.axisLeft(y).ticks(20, 's')) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", "0.71em") 
    .attr("text-anchor", "end") 
    .text("Frequency"); 

    g.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.neighborhoods); }) 
    .attr("y", function(d) { return y(d.median_housing_prices); }) 
    .attr("width", x.bandwidth()) 
    .attr("height", function(d) { return height - y(d.median_housing_prices); }); 

}); 

はバー2です

Answer 1

d3コードがたくさんあります.d3またはSVGの問題はなく、標準的なHTML/CSSレイアウトの問題がないことがわかりません。

ブラウザは、隣接する要素を並べて表示しますが、現在の幅が「大きすぎる」と一緒に要素を一緒に判断すると、垂直レイアウトに切り替わります。 CSSレイアウトのlingoでは、デフォルトでdisplay: inlineとなっています。 <div>はブロック要素ですが、CSSによって変更されない限り、垂直方向にレイアウトされます。トリックはこれを覆す、サイドレイアウトによって側の主張、そのようなものです：あなたはサイドレイアウトによって側の主張ため、2番目の<svg>は、ウィンドウの境界によって切り取られ

注意、何かもしれ来ます。

これを取得する方法はすべてHTML/CSS修正です。例えば：

• SVGsフロートは、左または右にするためにfloatプロパティを使用して、隣接するテーブルセルに
• をSVGsを置きます。
• コンテナ<div>を追加し、そこにSVGを絶対配置します。
• コンテナ<div>を追加して、テキストラッピングコントロールを使用してSVGを並べて保持します。
• おそらく半ダースです。
CSSプロパティ white-space: nowrapで含む <div>を使用して

、その後display: inlineにあなたのSVG-continaing <div>要素を設定すると、そのきれいな構造あなたのHTMLの簡単な解決策である、まだテーブルの方法で、簡単で信頼性の高い、とmaintanableで、フロート、絶対配置アプローチはそうではありません。あなたのHTMLの迅速で汚れた定式化が続きます。 （それはあなたのCSSファイルでスタイルを定義するために滑らかな印象です。）

<div style="white-space: nowrap;"> 
    <div id="bar1" style="display: inline"></div> 
    <div id="bar2" style="display: inline"></div> 
</div> 

ここでは、アイデアのrunning demoです。

「これはいつも並んでいます！」という欠点があります。コマンドは、まあ、 成功する可能性があります。要素が完全に表示されるのに十分な余裕がない場合、要素は常に並んでいます。 もあります。いつもずっと永遠になりたくない場合は、のfloat: leftスタイルで、の余白を<div>と<svg>に入れてみてください。 Fiddleでは、ウィンドウの幅を変更して、このダイナミックレイアウトの決定を実際に見られるようにすることができます。