javascript - 如何在幻灯片而不是正文中添加 d3js 图表？

Question

我是 d3js、css、html 的新手，正在尝试练习 d3js 的不同示例。我正在尝试在幻灯片中添加 d3js 图，而不是将其添加到网页正文中。我有点不知道如何做到这一点。如何在幻灯片放映中放置图表？以下是我尝试的代码供您引用-

<div class="mySlides fade">
        <div class="numbertext">2 / 3</div>

 Something goes here in slide 2

  </div>
    </div>


  <div class="mySlides fade">

      <div class="numbertext">3 / 4</div>

      <h1 style="font-size:400%;"><u>Data</u></h1>



          <script src="http://d3js.org/d3.v3.min.js"></script>
      <script>
            var margin = {top: 20, right: 20, bottom: 30, left: 40},
                width = 960 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

            /* 
             * value accessor - returns the value to encode for a given data object.
             * scale - maps value to a visual display encoding, such as a pixel position.
             * map function - maps from data value to display value
             * axis - sets up axis
             */ 

            // setup x 
            var xValue = function(d) { return d.Contributions;}, // data -> value
                xScale = d3.scale.linear().range([0, width]), // value -> display
                xMap = function(d) { return xScale(xValue(d));}, // data -> display
                xAxis = d3.svg.axis().scale(xScale).orient("bottom");

            // setup y
            var yValue = function(d) { return d.Deaths;}, // data -> value
                yScale = d3.scale.linear().range([height, 0]), // value -> display
                yMap = function(d) { return yScale(yValue(d));}, // data -> display
                yAxis = d3.svg.axis().scale(yScale).orient("left");

            // setup fill color
            var cValue = function(d) { return d.State;},
                color = d3.scale.category10();




            // add the graph canvas to the body of the webpage
            var svg = d3.select("body").append("svg")
             .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
             .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            // add the tooltip area to the webpage
            var tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

            // load data
            d3.csv("data.csv", function(error, data) {

              // change string (from CSV) into number format
              data.forEach(function(d) {
                d.Contributions = +d.Contributions;
                d.Deaths = +d.Deaths;
             //  console.log(d);
              });

            //   // don't want dots overlapping axis, so add in buffer to data domain
               xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
               yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

            //   // x-axis
              svg.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis)
                .append("text")
                  .attr("class", "label")
                  .attr("x", width)
                  .attr("y", -6)
                  .style("text-anchor", "end")
                  .text("Conntributions");

            //   // y-axis
              svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                .append("text")
                  .attr("class", "label")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text("Deaths");

              // draw dots
              svg.selectAll(".dot")
                  .data(data)
                .enter().append("circle")
                  .attr("class", "dot")
                  .attr("r", 3.5)
                  .attr("cx", xMap)
                  .attr("cy", yMap)
                  .style("fill", function(d) { return color(cValue(d));}) 
                  .on("mouseover", function(d) {
                      tooltip.transition()
                           .duration(200)
                           .style("opacity", .9);
                      tooltip.html(d["State"] + "<br/> (" + xValue(d) 
                        + ", " + yValue(d) + ")")
                           .style("left", (d3.event.pageX + 5) + "px")
                           .style("top", (d3.event.pageY - 28) + "px");
                  })
                  .on("mouseout", function(d) {
                      tooltip.transition()
                           .duration(500)
                           .style("opacity", 0);
                  });

              // draw legend
              var legend = svg.selectAll(".legend")
                  .data(color.domain())
                .enter().append("g")
                  .attr("class", "legend")
                  .attr("transform", function(d, i) {
                    return "translate("+ (i * 20 + 137) + ", 6)";
                  });

              // draw legend colored rectangles
              var boxSize = 17;
              legend.append("rect")
                  .attr("x", 0)
                  .attr("width", boxSize)
                  .attr("height", boxSize)
                  .style("fill", color);

              // draw legend text
              legend.append("text")
                  .attr("x", -8.2)
                  .attr("y", 19)
                  .attr("dy", ".35em")
                  .style("text-anchor", "end")
                  .attr("transform","rotate(-43)")
                  .text(function(d) { return d;})
            });

            </script>




    </div>

这段代码让我在幻灯片的所有页面中得到一个图表，我不想要它，但我想在我的幻灯片的第 3 页中添加一个图表。

Answer 1

这是一个有趣的问题:通常，这里的答案只是“通过 ID 或任何其他适合您的 CSS 选择器选择您想要的 div”(或者，因为这已经被回答了很多次，只是评论和投票结束)。这个答案的基础是这个......

var svg = d3.select("body").append("svg")

... 将在正文末尾附加 SVG。到目前为止，没有什么新的或困难的。

但为什么我说这是一个有趣的问题呢？

由于有趣的方式(如果您不介意我这么说的话)您尝试选择 div:您认为 D3 只需将相应的脚本放入其中即可在该 div 中创建图表。

当然，将脚本放在容器div 中并不是这样做的方法。但出于好奇，有一种方法可以做您认为正在做的事情(同样，选择包含脚本的元素):通过使用 document.currentScript ，其中:

Returns the element whose script is currently being processed.

因此，根据您的情况，我们只需要:

var container = document.currentScript.parentNode;
var svg = d3.select(container)
    .append("svg")
    //etc...

在 <div> 中附加 SVG (或任何其他包含元素)包含 <script> .

这是一个基本的演示:

<script src="https://d3js.org/d3.v5.min.js"></script>
<div>
  <h3>I am div 1</h3>
</div>
<div>
  <h3>I am div 2, I have a chart</h3>
  <script>
    var container = document.currentScript.parentNode;
    var svg = d3.select(container)
      .append("svg");
    var data = d3.range(10).map(d => Math.random() * 150);
    var scale = d3.scaleBand()
      .domain(data)
      .range([0, 300])
      .padding(0.4);
    var bars = svg.selectAll(null)
      .data(data)
      .enter()
      .append("rect")
      .style("fill", "steelblue")
      .attr("x", d => scale(d))
      .attr("width", scale.bandwidth())
      .attr("height", d => 150 - d)
      .attr("y", Number)
  </script>
</div>
<div>
  <h3>I am div 3</h3>
</div>
<div>
  <h3>I am div 4</h3>
</div>

请注意 document.CurrentScript不适用于 IE(如果您喜欢 IE，只需给 div 一个 ID 并选择它)。