时间戳

首页 > 解决方案 > 先前版本的 d3 是否可以与后一版本的 d3 一起使用

javascript - 先前版本的 d3 是否可以与后一版本的 d3 一起使用

问题描述

数据未使用最新版本的 d3 加载，并且无法正常工作这是链接

var yMargin = 40;
var width = 800;
var height = 400;
var barWidth = width / 275;
var tooltip = d3.select(".visHolder").append("div")
  .attr("id", "tooltip")
  .style("opacity", 0);
var overlay = d3.select(".visHolder").append("div")
  .attr("class", "overlay")
  .style("opacity", 0);
var svgContainer = d3.select(".visHolder")
  .append("svg")
  .attr("width", width + 100).attr("height", height + 60);
d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json', function(err, data) {
  svgContainer.append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", -200)
    .attr("y", 80)
    .text("Gross Domestic Product");
  svgContainer.append("text")
    .attr("x", width / 2 + 120)
    .attr("y", height + 50)
    .text('More Information: http://www.bea.gov/national/pdf/nipaguid.pdf')
    .attr("class", "info");
  var years = data.data.map(function(item) {
    var quarter;
    var temp = item[0].substring(5, 7);
    if (temp === "01") {
      quarter = "Q1";
    } else if (temp === "04") {
      quarter = "Q2";
    } else if (temp === "07") {
      quarter = "Q3";
    } else if (temp === "10") {
      quarter = "Q4";
    }
    return item[0].substring(0, 4) + " " + quarter
  });
  var yearsDate = data.data.map(function(item) {
    return new Date(item[0]);
  });
  var xMax = new Date(d3.max(yearsDate));
  xMax.setMonth(xMax.getMonth() + 3);
  var xScale = d3.scaleTime()
    .domain([d3.min(yearsDate), xMax])
    .range([0, width]);
  var xAxis = d3.axisBottom()
    .scale(xScale);
  var xAxisGroup = svgContainer.append("g")
    .call(xAxis)
    .attr("id", "x-axis")
    .attr("transform", "translate(60, 400)");
  var GDP = data.data.map(function(item) {
    return item[1]
  });
  var scaledGDP = [];
  var gdpMin = d3.min(GDP);
  var gdpMax = d3.max(GDP);
  var linearScale = d3.scaleLinear()
    .domain([0, gdpMax])
    .range([0, height]);
  scaledGDP = GDP.map(function(item) {
    return linearScale(item);
  });
  var yAxisScale = d3.scaleLinear()
    .domain([0, gdpMax])
    .range([height, 0]);
  var yAxis = d3.axisLeft(yAxisScale)
  var yAxisGroup = svgContainer.append("g")
    .call(yAxis)
    .attr("id", "y-axis")
    .attr("transform", "translate(60,0)");
  d3.select("svg").selectAll("rect")
    .data(scaledGDP)
    .enter()
    .append("rect")
    .attr("date-date", function(d, i) {
      return data.data[i][0]
    })
    .attr("data-gdp", function(d, i) {
      return data.data[i][1]
    })
    .attr("class", "bar")
    .attr("x", function(d, i) {
      return xScale(yearsDate[i]);
    })
    .attr("y", function(d, i) {
      return height - d;
    })
    .attr("width", barWidth)
    .attr("height", function(d) {
      return d;
    })
    .style("fill", "#FD7272")
    .attr("transform", "translate(60,0)")
    .on("mouseover", function(d, i) {
      overlay.transition()
        .duration(0)
        .style("height", d + "px")
        .style("width", barWidth + "px")
        .style("opacity", .9)
        .style("left", (i * barWidth) + 0 + "px")
        .style("top", height - d + "px")
        .style("transform", "translateX(60px)");
      tooltip.transition()
        .duration(200)
        .style("opacity", .9)
      tooltip.html(years[i] + "<br>" + "$" +
          GDP[i].toFixed(1).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") + " Billion")
        .attr("date-date", data.data[i][0])
        .style("left", (i * barWidth) + 30 + "px")
        .style("top", height - 100 + "px")
        .style("transform", "translateX(60px)");
    })
    .on("mouseout", function(d) {
      tooltip.transition()
        .duration(200)
        .style("opacity", 0);
      overlay.transition()
        .duration(200)
        .style("opacity", 0);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.1.1/d3.min.js"></script>
<div class="main">
  <div class="container">
    <div id="title">United States GDP</div>
    <div class="visHolder"></div>
  </div>
</div>

标签： javascriptd3.js

解决方案

在 d3 v6中，旧的d3.json(<src>, <callback>)已被替换为d3.json(<src>).then(<successcallback>).catch(<errorcallback>);

旧的 freecodecamp 示例是为旧版本的 d3 编写的。

这就是为什么以下内容有效，且改动很小：

var yMargin = 40;
var width = 800;
var height = 400;
var barWidth = width / 275;
var tooltip = d3.select(".visHolder").append("div")
  .attr("id", "tooltip")
  .style("opacity", 0);
var overlay = d3.select(".visHolder").append("div")
  .attr("class", "overlay")
  .style("opacity", 0);
var svgContainer = d3.select(".visHolder")
  .append("svg")
  .attr("width", width + 100).attr("height", height + 60);

d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json').then(function(data) {
  svgContainer.append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", -200)
    .attr("y", 80)
    .text("Gross Domestic Product");
  svgContainer.append("text")
    .attr("x", width / 2 + 120)
    .attr("y", height + 50)
    .text('More Information: http://www.bea.gov/national/pdf/nipaguid.pdf')
    .attr("class", "info");
  var years = data.data.map(function(item) {
    var quarter;
    var temp = item[0].substring(5, 7);
    if (temp === "01") {
      quarter = "Q1";
    } else if (temp === "04") {
      quarter = "Q2";
    } else if (temp === "07") {
      quarter = "Q3";
    } else if (temp === "10") {
      quarter = "Q4";
    }
    return item[0].substring(0, 4) + " " + quarter
  });
  var yearsDate = data.data.map(function(item) {
    return new Date(item[0]);
  });
  var xMax = new Date(d3.max(yearsDate));
  xMax.setMonth(xMax.getMonth() + 3);
  var xScale = d3.scaleTime()
    .domain([d3.min(yearsDate), xMax])
    .range([0, width]);
  var xAxis = d3.axisBottom()
    .scale(xScale);
  var xAxisGroup = svgContainer.append("g")
    .call(xAxis)
    .attr("id", "x-axis")
    .attr("transform", "translate(60, 400)");
  var GDP = data.data.map(function(item) {
    return item[1];
  });
  var scaledGDP = [];
  var gdpMin = d3.min(GDP);
  var gdpMax = d3.max(GDP);
  var linearScale = d3.scaleLinear()
    .domain([0, gdpMax])
    .range([0, height]);
  scaledGDP = GDP.map(function(item) {
    return linearScale(item);
  });
  var yAxisScale = d3.scaleLinear()
    .domain([0, gdpMax])
    .range([height, 0]);
  var yAxis = d3.axisLeft(yAxisScale)
  var yAxisGroup = svgContainer.append("g")
    .call(yAxis)
    .attr("id", "y-axis")
    .attr("transform", "translate(60,0)");
  d3.select("svg").selectAll("rect")
    .data(scaledGDP)
    .enter()
    .append("rect")
    .attr("date-date", function(d, i) {
      return data.data[i][0]
    })
    .attr("data-gdp", function(d, i) {
      return data.data[i][1]
    })
    .attr("class", "bar")
    .attr("x", function(d, i) {
      return xScale(yearsDate[i]);
    })
    .attr("y", function(d, i) {
      return height - d;
    })
    .attr("width", barWidth)
    .attr("height", function(d) {
      return d;
    })
    .style("fill", "#FD7272")
    .attr("transform", "translate(60,0)")
    .on('click', function(event, d) {
      console.log(d);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.1.1/d3.min.js"></script>
<div class="main">
  <div class="container">
    <div id="title">United States GDP</div>
    <div class="visHolder"></div>
  </div>
</div>

要使用click事件，根据此迁移指南，新签名将通过(event, data, index)，而不是(data, index). 上面的代码片段包含一个例子，d当点击一个栏时记录在哪里。

推荐阅读