Question

我正在使用D3.js来展示我的数据。但是，我无法让两个不同的对象重叠。例如，下面的代码显示了折线图和条形图。我在本例中使用https://github.com/d3/d3/wiki/Gallery中的代码来显示我的问题。折线图代码来自https://bl.ocks.org/mbostock/3883245。条形码代码来自https://bl.ocks.org/mbostock/3885304。我尝试使用如此示例http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html中所示，但它不起作用。我还确保他们都使用了相同版本的d3.js.数据来自上面链接上的两个tsv文件，用于行和条形图。任何帮助将不胜感激！

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis--x path {
  display: none;
}

</style>

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


<div id="lineg"></div>
<div id="barg"></div>
<lineg width="960" height="500"></lineg>
<barg width="960" height="500"></barg>
<script>

var svga = d3.select("#lineg"),
    margina = {top: 20, right: 20, bottom: 30, left: 40},
    widtha = +svga.attr("width") - margina.left - margina.right,
    heighta = +svga.attr("height") - margina.top - margina.bottom;

var xa = d3.scaleBand().rangeRound([0, widtha]).padding(0.1),
    ya = d3.scaleLinear().rangeRound([heighta, 0]);

var ga = svga.append("g")
    .attr("transform", "translate(" + margina.left + "," + margina.top +     ")");

d3.tsv("bardata.tsv", function(d) {
  d.frequency = +d.frequency;
  return d;
}, function(error, data) {
  if (error) throw error;

  xa.domain(data.map(function(d) { return d.letter; }));
  ya.domain([0, d3.max(data, function(d) { return d.frequency; })]);

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

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

  ga.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return xa(d.letter); })
      .attr("y", function(d) { return ya(d.frequency); })
      .attr("width", xa.bandwidth())
      .attr("height", function(d) { return heighta - ya(d.frequency); });
});

</script>


<script>

var svgb = d3.select("barg"),
    marginb = {top: 20, right: 20, bottom: 30, left: 50},
    widthb = +svgb.attr("width") - marginb.left - marginb.right,
    heightb = +svgb.attr("height") - marginb.top - marginb.bottom,
    gb = svgb.append("g").attr("transform", "translate(" + marginb.left +    "," + marginb.top + ")");

var parseTime = d3.timeParse("%d-%b-%y");

var xb = d3.scaleTime()
    .rangeRound([0, widthb]);

var yb = d3.scaleLinear()
    .rangeRound([heightb, 0]);

var line = d3.line()
    .x(function(d) { return xb(d.date); })
    .y(function(d) { return yb(d.close); });

d3.tsv("linedata.tsv", function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  return d;
}, function(error, data) {
  if (error) throw error;

  xb.domain(d3.extent(data, function(d) { return d.date; }));
  yb.domain(d3.extent(data, function(d) { return d.close; }));

  gb.append("g")
      .attr("transform", "translate(0," + heightb + ")")
      .call(d3.axisBottom(xb))
    .select(".domain")
      .remove();

  gb.append("g")
      .call(d3.axisLeft(yb))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Price ($)");

  gb.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
});

</script>

Answer 1

在您的代码中barg和lineg只是div：

<div id="lineg"></div>
<div id="barg"></div>

而不是那样，它们应该是SVG元素，如下所示：

<svg id="barg" width="960" height="500"></svg>
<svg id="lineg" width="960" height="500"></svg>

或者，在您的选择中附加一个SVG：

var svga = d3.select("#lineg").append("svg");
var svgb = d3.select("#barg").append("svg");

但是，在这种情况下，您无法使用getter来获取SVG的宽度和高度。

最后，没有名为<lineg>或<barg>的HTML标记。

如何将不同的D3.js脚本放在同一页面上而不重叠？

1 个答案: