Question

我正在使用d3.js，我正在尝试在同一页面中显示多个图表。虽然d3.js代码相同。一个图表来自Measurements.csv，另一个来自m1.csv。

<!DOCTYPE html>

<svg width="1000" height="500"></svg>

<style> /* set the CSS */


.grid line {
  stroke: aquamarine;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 1;
}

</style>
<style>
body {
    background-color: SlateGrey;
}
</style>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// set the dimensions and margins of the graph
var svg2 = d3.select("svg"),
    margin = {top: 0, right: 0, bottom: 90, left: 50},
    width = 950 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    g = svg2.append("g").attr("transform", "translate(" + margin.left +  "," + margin.top + ")");


var x = d3.scaleLinear()
    .rangeRound([0, width]);

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

    // gridlines in x axis function
    function make_x_gridlines() {
        return d3.axisBottom(x)
            .ticks(5)
    }

    // gridlines in y axis function
function make_y_gridlines() {
    return d3.axisLeft(y)
        .ticks(5)
}

var line = d3.line()
    .x(function(d) { return x(d.frequency); })
    .y(function(d) { return y(d.output); });




d3.csv("Measurements.csv", function(d) {
  d.frequency = +d.frequency;
  d.output = +d.output;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.frequency; }));
  y.domain(d3.extent(data, function(d) { return d.output; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .append("text")
        .attr("fill", "#000")
        .attr("y", 10)
        .attr("dx", "0.71em")
        .attr("text-anchor", "end")
        .text("Frequency");


  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 9)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Mixer");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "aquamarine")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 4)
      .attr("d", line);

      // add the X gridlines
  svg2.append("g")
      .attr("class", "grid")
      .attr("transform", "translate(0," + height + ")")
      .call(make_x_gridlines()
          .tickSize(-height)
          .tickFormat("")
      )  

      // add the Y gridlines
 svg2.append("g")
     .attr("class", "grid")
     .call(make_y_gridlines()
         .tickSize(-width)
         .tickFormat("")
     )


});

// set the dimensions and margins of the graph
var svg3 = d3.select("svg"),
    margin = {top: 0, right: 0, bottom: 90, left: 50},
    width = 950 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    g = svg2.append("g").attr("transform", "translate(" + margin.left +  "," + margin.top + ")");


var x = d3.scaleLinear()
    .rangeRound([0, width]);

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

    // gridlines in x axis function
    function make_x_gridlines() {
        return d3.axisBottom(x)
            .ticks(5)
    }

    // gridlines in y axis function
function make_y_gridlines() {
    return d3.axisLeft(y)
        .ticks(5)
}

var line = d3.line()
    .x(function(d) { return x(d.frequency); })
    .y(function(d) { return y(d.output); });




d3.csv("m1.csv", function(d) {
  d.frequency = +d.frequency;
 d.output = +d.output;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.frequency; }));
  y.domain(d3.extent(data, function(d) { return d.output; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .append("text")
        .attr("fill", "#000")
        .attr("y", 10)
        .attr("dx", "0.71em")
        .attr("text-anchor", "end")
        .text("Frequency");


  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 9)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Mixer");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "aquamarine")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 4)
      .attr("d", line);

      // add the X gridlines
  svg3.append("g")
      .attr("class", "grid")
      .attr("transform", "translate(0," + height + ")")
      .call(make_x_gridlines()
          .tickSize(-height)
          .tickFormat("")
      )

      // add the Y gridlines
 svg3.append("g")
     .attr("class", "grid")
     .call(make_y_gridlines()
         .tickSize(-width)
         .tickFormat("")
     )


});

</script>

我发现必须使用不同的变量名称来保存svgs，例如svg1，svg2 ......等等。但是一个图表正在另一个图表上。如何解决这个问题？{{ 3}}

Answer 1

只是改变这个......

var svg = d3.select("svg")

...为此...

var svg2 = d3.select("svg")

...没有任何区别：变量名称不同，但选择相同：他们都选择相同的 SVG。

由于您没有附加SVG，而是选择现有的SVG，请设置两个SVG，每个SVG都有一个唯一的ID ....

<svg id="svg1" width="1000" height="500"></svg>
<svg id="svg2" width="1000" height="500"></svg>

...并相应地选择它们：

var svg1 = d3.select("#svg1")
var svg2 = d3.select("#svg2")

PS：我只解决选择问题。为避免重复代码（因为您说代码相同），请将整个代码包装在一个带有两个参数的函数中：所选SVG的ID和CSV文件的路径。然后，您只需要使用不同的参数调用该函数两次。

一页上的多个简单图形d3.js

1 个答案: