d3 图表不会在 UIkit 框架中居中

Posted 2023-03-06

【中文标题】d3 图表不会在 UIkit 框架中居中

【英文标题】：d3 chart won't centre in UIkit framework

【发布时间】：2020-11-29 11:03:41

【问题描述】：

我使用 d3.js 设计了一个图表，并将其嵌入到 UIkit 框架内的 div 中，但是我无法让它在 div 中居中。

我尝试将 svg 放入容器中并通过将 svg 放入 flexbox 中来调整 CSS，删除边距，将其居中对齐，但都不起作用。我试过this响应，this一个，this一个和this一个，但它们都不起作用。我敢肯定它一定很简单——我怎样才能让它居中？代码如下。

图表

<div id="age_chart" class="uk-container uk-width-medium-1-2 uk-container-center uk-margin-top">
  <script>
  // chart based on this example: https://bl.ocks.org/63anp3ca/6bafeb64181d87750dbdba78f8678715
  // var svg1 = d3.select("svg1"),
  var margin = top: 20, right: 20, bottom: 100, left: 20,
      width1 = d3.select("#age_chart").node().getBoundingClientRect().width,
      height1 = 400 - margin.top - margin.bottom;
      // g = svg1.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // The scale spacing the groups:
  var x0 = d3.scaleBand()
      .rangeRound([0, width1])
      .paddingInner(0.05);

  // The scale for spacing each group's bar:
  var x1 = d3.scaleBand()
      .padding(0.05);

  var y = d3.scaleLinear()
      .rangeRound([height1, 0]);

  var z = d3.scaleOrdinal()
      .range(["#2c7fb8", "#7fcdbb"]);

    var svg1 = d3.select('body').append("svg")
    .attr("width", width1 + margin.left + margin.right)
    .attr("height", height1 + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  d3.csv("data/age_distribution.csv", function(d, i, columns) 
      for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
      return d;
  ).then(function(data) 
      console.log(data);

      var keys = data.columns.slice(1);

      console.log('keys');
      console.log(keys);
      x0.domain(data.map(function(d)  return d.age; ));
      x1.domain(keys).rangeRound([0, x0.bandwidth()]);
      y.domain([0, d3.max(data, function(d)  return d3.max(keys, function(key)  return d[key]; ); )]).nice();

      svg1.append("g")
          .selectAll("g")
          .data(data)
          .enter().append("g")
          .attr("class","bar")
          .attr("transform", function(d)  return "translate(" + x0(d.age) + ",0)"; )
          .selectAll("rect")
          .data(function(d)  return keys.map(function(key)  return key: key, value: d[key]; ); )
          .enter().append("rect")
          .attr("x", function(d)  return x1(d.key); )
          .attr("y", function(d)  return y(d.value); )
          .attr("width", x1.bandwidth())
          .attr("height", function(d)  return height1 - y(d.value); )
          .attr("fill", function(d)  return z(d.key); );

      svg1.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(0," + height1 + ")")
          .call(d3.axisBottom(x0));

      svg1.append("g")
          .attr("class", "y axis")
          .call(d3.axisLeft(y).ticks(null, "s"))
          .append("text")
          .attr("x", 2)
          .attr("y", y(y.ticks().pop()) + 0.5)
          .attr("dy", "0.32em")
          .attr("fill", "#000")
          .attr("font-size", 11)
          .attr("text-anchor", "start")
          .text("Percentage of population")
          .attr("font-family", "Archivo");

      var legend1 = svg1.append("g")
          .attr("font-family", "inherit")
          .attr("font-size", 11)
          .attr("text-anchor", "end")
          .selectAll("g")
          .data(keys.slice().reverse())
          .enter().append("g")
          .attr("transform", function(d, i)  return "translate(0," + i * 20 + ")"; );

      legend1.append("rect")
          .attr("x", width1 * .9)
          .attr("width", 15)
          .attr("height", 15)
          .attr("fill", z)
          .attr("stroke", z)
          .attr("stroke-width",2)
          .on("click",function(d)  update(d) );

      legend1.append("text")
          .attr("x", width1 * .85)
          .attr("y", 9.5)
          .attr("dy", "0.32em")
          .text(function(d)  return d; );

      var filtered = [];

      ////
      //// Update and transition on click:
      ////

      function update(d) 

          //
          // Update the array to filter the chart by:
          //

          // add the clicked key if not included:
          if (filtered.indexOf(d) == -1) 
              filtered.push(d);
              // if all bars are un-checked, reset:
              if(filtered.length == keys.length) filtered = [];
          
          // otherwise remove it:
          else 
              filtered.splice(filtered.indexOf(d), 1);
          

          //
          // Update the scales for each group's items:
          //
          var newKeys = [];
          keys.forEach(function(d) 
              if (filtered.indexOf(d) == -1 ) 
                  newKeys.push(d);
              
          )
          x1.domain(newKeys).rangeRound([0, x0.bandwidth()]);
          y.domain([0, d3.max(data, function(d)  return d3.max(keys, function(key)  if (filtered.indexOf(key) == -1) return d[key]; ); )]).nice();

          // update the y axis:
          svg1.select(".y")
              .transition()
              .call(d3.axisLeft(y).ticks(null, "s"))
              .duration(500);


          //
          // Filter out the bands that need to be hidden:
          //
          var bars = svg1.selectAll(".bar").selectAll("rect")
              .data(function(d)  return keys.map(function(key)  return key: key, value: d[key]; ); )

          bars.filter(function(d) 
                  return filtered.indexOf(d.key) > -1;
              )
              .transition()
              .attr("x", function(d) 
                  return (+d3.select(this).attr("x")) + (+d3.select(this).attr("width"))/2;
              )
              .attr("height",0)
              .attr("width",0)
              .attr("y", function(d)  return height1; )
              .duration(500);

          //
          // Adjust the remaining bars:
          //
          bars.filter(function(d) 
                  return filtered.indexOf(d.key) == -1;
              )
              .transition()
              .attr("x", function(d)  return x1(d.key); )
              .attr("y", function(d)  return y(d.value); )
              .attr("height", function(d)  return height1 - y(d.value); )
              .attr("width", x1.bandwidth())
              .attr("fill", function(d)  return z(d.key); )
              .duration(500);


          // update legend:
          legend1.selectAll("rect")
              .transition()
              .attr("fill",function(d) 
                  if (filtered.length) 
                      if (filtered.indexOf(d) == -1) 
                          return z(d);
                      
                      else 
                          return "white";
                      
                  
                  else 
                      return z(d);
                  
              )
              .duration(100);
      

  );
  </script>
  </div>

【参考方案1】：

问题是 SVG 不在您的 div 中。

script 元素的位置并不能决定 SVG 将附加到页面上的哪个位置。如果你把它放在页面的底部，你会得到同样的结果——你需要这样做以等待 DOM 完全加载。

d3.select('body').append("svg") 会将 svg 直接附加到 body 元素上。要将其附加到您创建的元素中，因为它具有 id age_chart，请使用：

d3.select('#age_chart').append("svg")

【讨论】：

已经居中了，谢谢！但是传说现在已经消失了，你知道是什么原因造成的吗？当我调试它时什么都没有出现