0

平行座標チャートを作成しましたが、レスポンシブにしたいと思います。
応答性をテストする目的で、最初にMike Bostock によるこの例を応答性にすると考えました。

私が直面している問題は、「svg」を「body」タグ内に直接配置すると、完全に機能することです。しかし、いくつかの div 内に「svg」を配置すると、ウィンドウのサイズが変更されるとチャートがトリミングされます。また、svg の高さは 70% と記載されていますが、80% にすると、サイズを変更せずにグラフがトリミングされます。viewBox と preserveAspectRatio を使用する別のオプションがあることは知っていますが、私やコードを読んでいる他の人にとって理解しやすいので、このアプローチを使用しました。アプローチは次のとおりです。 

 d3.csv("data.csv",function(data){
  ....
 function resize(){
    width = parseInt(d3.select("#mychart").style("width")) - margin.left - margin.right,
      height = parseInt(d3.select("#mychart").style("height")) - margin.top - margin.bottom;

      x.rangePoints([0, width], 1);

      svg.select("#mychart")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom);

      x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
            return d != "name" && (y[d] = d3.scale.linear()
                .domain(d3.extent(cars, function(p) { return +p[d]; }))
                .range([height, 0]));
          }));

      svg.selectAll(".line").attr("d", path);

      g = svg.selectAll(".dimension")
          .attr("transform", function(d) { return "translate(" + x(d) + ")"; });

      g.selectAll(".axis")
          .each(function(d) {d3.select(this).call(axis.scale(y[d])); })
        .append("text")
          .style("text-anchor", "middle")
          .attr("y", -9)
          .text(function(d) { return d; });
  }
  d3.select(window).on('resize', resize);
  resize();
});

完全なコードの plunker リンクは次のとおりです。コードの何が問題なのか、誰でも指摘できますか?

4

1 に答える 1

0

これはCSSを理解するためのものです。

具体的には、<svg>要素にheightofを指定100%し、それを含む要素のサイズを設定できます。

私の例を参照してください。

ここで、 には<svg>常に の がheightあり100%、<div>含まれて<svg>いる には パーセンテージがあります。これは、絶対高さ (ビューポート単位height) を持つコンテナーに相対的です。.container-fluid

また、この回答を確認してください：

div の高さをビューポートの高さのパーセンテージにしたい場合、 および を含む div のすべての先祖は、高さ: 100% を持つ必要があるため、div までの明示的なパーセンテージの高さのチェーンがあります。

または、最新のすべてのブラウザーと IE>=9 は、ビューポートの高さ (vh) とビューポートの幅 (vw) に関連する新しい CSS 単位をサポートします。

そしてこの答え：

SVG で HTML 要素を埋めるには、ラッパーに CSS 属性position:relative(またはposition:absolute適切position:fixedな場合) を配置し、[...] 要素に CSS 属性position:absoluteを設定して、<svg>要素を div 内に配置して埋めます。（必要に応じて も申請してleft:0; top:0; width:100%; height:100%ください。）

(私が行ったように)ビューポート単位を使用して、含まれている の高さを設定できdivます。

flexboxまたは、プロパティを使用して.row要素を配置することもできます。

また、resize()関数を大幅に簡素化できます。次の 3 つのことを行う必要があります。

  1. スケールの範囲を更新する
  2. これらのスケールを使用する属性を更新します
  3. 軸関数を呼び出します
  function resize() {
    width = parseInt(d3.select("#mychart").style("width")) - margin.left - margin.right,
    height = parseInt(d3.select("#mychart").style("height")) - margin.top - margin.bottom;

    x.rangePoints([0, width], 1);

    d3.values(y).forEach(function(scale) {
      scale.range([height, 0])
    })

    svg.selectAll(".line").attr("d", path);

    g = svg.selectAll(".dimension")
      .attr("transform", function(d) {
        return "translate(" + x(d) + ")";
      });

    g.selectAll(".axis").call(axis.scale(y[d]))
  }
于 2015-11-21T19:00:55.017 に答える