单击按钮切换数据集时无法更新图表

Question

我第一次加载数据时，图表绘制正确，但当我加载不同的数据集时，图表保持不变。

我使用按钮在数据集之间切换。无论我点击哪个按钮，第一次点击总是能正确绘制图形。但是在通过单击另一个按钮绘制图形后，我无法更新图形。非常感谢任何帮助，谢谢！

const dataA = [
  { population: 50, size: 100 },
  { population: 100, size: 100 },
];

const dataB = [
  { money: 4, currency: "usd" },
  { money: 10, currency: "eur" },
];

function drawChart(dataSet, prop) {
  let width = 900;
  let height = 200;
  let x = d3.scale.ordinal().rangeRoundBands([0, width], 0.9);
  let y = d3.scale
    .linear()
    .domain([dataSet[0][prop] - 39, dataSet[dataSet.length - 1][prop]])
    .range([height, 0]);
  let chart = d3.select("#chart").attr("width", width).attr("height", height);
  let barWidth = width / dataSet.length;
  let div = d3.select("body").append("div").attr("class", "tooltip");
  let bar = chart
    .selectAll("g")
    .data(dataSet)
    .enter()
    .append("g")
    .attr("transform", function (d, i) {
      return "translate(" + i * barWidth + ",0)";
    });
  bar
    .append("rect")
    .attr("y", function (d) {
      return y(d[prop]);
    })
    .attr("height", function (d) {
      return height - y(d[prop]);
    })
    .attr("width", barWidth);
}

function drawDataA() {
  drawChart(dataA, "population");
}
function drawDataB() {
  drawChart(dataB, "money");
}

d3.select("#dataA").on("click", drawDataA);
d3.select("#dataB").on("click", drawDataB);

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <head>
    <script src="https://d3js.org/d3.v4.js"></script>
  </head>
  <body>
    <div id="app">
      <svg class="chart" id="chart"></svg>
      <button id="dataA">data1</button>
      <button id="dataB">data2</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

代码笔：https://codepen.io/rfripp2/pen/porpaLL

Answer 1

这是预期的行为。让我们看看您的代码：

let bar = chart
    .selectAll("g")   
    .data(dataSet)    
    .enter()         
    .append("g")

select all 语句 selects 匹配 select 的所有现有元素或 selection chart 中元素的子元素。

数据方法将一个新的数据数组绑定到这个 selection。

enter 方法 returns 一个新的 selection，包含数据数组中每个项目的占位符，在 selection 中没有对应的元素。

追加方法 returns 为调用它的 selection 中的每个元素新追加的子元素。

运行代码

第一次调用绘图函数时没有 g 个元素，因此 selection 是空的。您将数据绑定到这个空的 selection。然后使用输入 selection。因为selection中有两个数据项，没有元素，enter包含两个placeholders/elements。然后，您可以使用 append 添加这些元素。

第二次调用绘图函数时，您有两个 g 元素，因此 selection 中有两个元素。您将数据绑定到此 selection。然后使用输入 selection。因为您已经有两个元素并且只有两个数据点，所以输入 selection 是空的。因此，append 不会创建任何新元素。

您可以使用 selection.size():

来查看

const dataA = [
  { population: 50, size: 100 },
  { population: 100, size: 100 },
];

const dataB = [
  { money: 4, currency: "usd" },
  { money: 10, currency: "eur" },
];

function drawChart(dataSet, prop) {
  let width = 900;
  let height = 200;
  let x = d3.scale.ordinal().rangeRoundBands([0, width], 0.9);
  let y = d3.scale
    .linear()
    .domain([dataSet[0][prop] - 39, dataSet[dataSet.length - 1][prop]])
    .range([height, 0]);
  let chart = d3.select("#chart").attr("width", width).attr("height", height);
  let barWidth = width / dataSet.length;
  let div = d3.select("body").append("div").attr("class", "tooltip");
  let bar = chart
    .selectAll("g")
    .data(dataSet)
    .enter()
    .append("g")
    .attr("transform", function (d, i) {
      return "translate(" + i * barWidth + ",0)";
    });
    
    console.log("The enter selection contains: " + bar.size() + "elements")
    
  bar
    .append("rect")
    .attr("y", function (d) {
      return y(d[prop]);
    })
    .attr("height", function (d) {
      return height - y(d[prop]);
    })
    .attr("width", barWidth);
}

function drawDataA() {
  drawChart(dataA, "population");
}
function drawDataB() {
  drawChart(dataB, "money");
}

d3.select("#dataA").on("click", drawDataA);
d3.select("#dataB").on("click", drawDataB);

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <head>
    <script src="https://d3js.org/d3.v4.js"></script>
  </head>
  <body>
    <div id="app">
      <svg class="chart" id="chart"></svg>
      <button id="dataA">data1</button>
      <button id="dataB">data2</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

解决方案

我们想同时使用更新和输入 selection（如果数据集的大小发生变化，我们可能也需要退出 selection）。我们可以使用 .join() 来简化这个，join 删除退出 selection 中的元素（没有相应数据项的多余元素），returns 合并后进入 selection（多余数据项的新元素）并更新 selection（先前存在的元素）。

此处不需要将元素嵌套到父 g 和子 rect 中 - 并且需要进行额外的修改。通过直接定位条，我们避免了对父 g:

的需要

const dataA = [
  { population: 50, size: 100 },
  { population: 100, size: 100 },
];

const dataB = [
  { money: 4, currency: "usd" },
  { money: 10, currency: "eur" },
];

function drawChart(dataSet, prop) {
  let width = 400;
  let height = 200;
  let x = d3.scaleBand().range([0, width], 0.9);
  let y = d3.scaleLinear()
    .domain([dataSet[0][prop] - 39, dataSet[dataSet.length - 1][prop]])
    .range([height, 0]);
  let chart = d3.select("#chart").attr("width", width).attr("height", height);
  let barWidth = width / dataSet.length;
  let div = d3.select("body").append("div").attr("class", "tooltip");
  let bar = chart
    .selectAll("rect")
    .data(dataSet)
    .join("rect")
    .attr("transform", function (d, i) {
      return "translate(" + i * barWidth + ",0)";
    }).attr("y", function (d) {
      return y(d[prop]);
    })
    .attr("height", function (d) {
      return height - y(d[prop]);
    })
    .attr("width", barWidth);
}

function drawDataA() {
  drawChart(dataA, "population");
}
function drawDataB() {
  drawChart(dataB, "money");
}

d3.select("#dataA").on("click", drawDataA);
d3.select("#dataB").on("click", drawDataB);

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <head>
    
  </head>
  <body>
    <div id="app">
      <svg class="chart" id="chart"></svg>
      <br />
      <button id="dataA">data1</button>
      <button id="dataB">data2</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

这需要从 v3 更新您的 D3 版本（您实际上使用的是 D3 的两个版本，v3 和 v4，两者都相当过时，并且都具有不同的方法名称，实际上处理输入的方式不同 selection).

如果你想使用d3v4，那么join方法是不可用的，但是我们可以merge enter和update:

当我说更新 selection 时，我指的是最初的 selection:

  // update selection:
  let bar = chart
    .selectAll("rect")
    .data(dataSet);
    
   // enter selection:   
  bar.enter().append("rect")

const dataA = [
  { population: 50, size: 100 },
  { population: 100, size: 100 },
];

const dataB = [
  { money: 4, currency: "usd" },
  { money: 10, currency: "eur" },
];

function drawChart(dataSet, prop) {
  let width = 400;
  let height = 200;
  let x = d3.scaleBand().range([0, width], 0.9);
  let y = d3.scaleLinear()
    .domain([dataSet[0][prop] - 39, dataSet[dataSet.length - 1][prop]])
    .range([height, 0]);
  let chart = d3.select("#chart").attr("width", width).attr("height", height);
  let barWidth = width / dataSet.length;
  let div = d3.select("body").append("div").attr("class", "tooltip");
  let bar = chart
    .selectAll("rect")
    .data(dataSet);
    
  bar.enter().append("rect")
     .merge(bar)
    .attr("transform", function (d, i) {
      return "translate(" + i * barWidth + ",0)";
    }).attr("y", function (d) {
      return y(d[prop]);
    })
    .attr("height", function (d) {
      return height - y(d[prop]);
    })
    .attr("width", barWidth);
}

function drawDataA() {
  drawChart(dataA, "population");
}
function drawDataB() {
  drawChart(dataB, "money");
}

d3.select("#dataA").on("click", drawDataA);
d3.select("#dataB").on("click", drawDataB);

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <head>
    
  </head>
  <body>
    <div id="app">
      <svg class="chart" id="chart"></svg>
      <br />
      <button id="dataA">data1</button>
      <button id="dataB">data2</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

最后，如果您希望保留 d3v3（我们已经在 v7 上了），我们可以依靠隐式合并更新并在输入时输入（修改更新 selection）。这个“魔术”在 v4 中被删除，部分原因是它不明确。为此，我们需要打破您的方法链接，以便 bar 包含

const dataA = [
  { population: 50, size: 100 },
  { population: 100, size: 100 },
];

const dataB = [
  { money: 4, currency: "usd" },
  { money: 10, currency: "eur" },
];

function drawChart(dataSet, prop) {
  let width = 400;
  let height = 200;
  let x = d3.scale.ordinal().rangeRoundBands([0, width], 0.9);
  let y = d3.scale.linear()
    .domain([dataSet[0][prop] - 39, dataSet[dataSet.length - 1][prop]])
    .range([height, 0]);
  let chart = d3.select("#chart").attr("width", width).attr("height", height);
  let barWidth = width / dataSet.length;
  let div = d3.select("body").append("div").attr("class", "tooltip");
  
  // update selection:
  let bar = chart
    .selectAll("rect")
    .data(dataSet);
    
   // enter selection:   
  bar.enter().append("rect")
     
     
    bar.attr("transform", function (d, i) {
      return "translate(" + i * barWidth + ",0)";
    }).attr("y", function (d) {
      return y(d[prop]);
    })
    .attr("height", function (d) {
      return height - y(d[prop]);
    })
    .attr("width", barWidth);
}

function drawDataA() {
  drawChart(dataA, "population");
}
function drawDataB() {
  drawChart(dataB, "money");
}

d3.select("#dataA").on("click", drawDataA);
d3.select("#dataB").on("click", drawDataB);

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <head>
    
  </head>
  <body>
    <div id="app">
      <svg class="chart" id="chart"></svg>
      <br />
      <button id="dataA">data1</button>
      <button id="dataB">data2</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

注意：d3v4 更改了破坏 v3 代码的方法名称。这需要使用 v4 和 7（分别使用合并和连接）对片段中的 d3.scale.linear / d3.scale.ordinal 进行更改。

单击按钮切换数据集时无法更新图表

Unable to supdate chart when switching dataset on button click

d3.js