d3.js - 不能在多折线图 d3 上放置圆圈

Question

我尝试了很多方法来绑定数据，但没有运气。

我的部分代码是这样的：

 let circleData = data.map((i) => i.values);
      mainGraph
        // .append("g")
        .selectAll("circle")
        .data(circleData)
        .enter()
        .append("circle")
        .attrs({
          cx: (d) => xScale(d.name),
          cy: (d) => yScale(d.value),
          r: 3,
          opacity: 1,
        });

我对数据函数很困惑，用同样的方法画线它工作正常，但是当涉及到圆圈时，它似乎根本无法读取数据。我希望有人能帮助我理解这一点，非常感谢！

const data = [{
  category: "series_1",
  values: [{
      name: "A",
      value: 10
    },
    {
      name: "B",
      value: 21
    },
    {
      name: "C",
      value: 19
    },
    {
      name: "D",
      value: 23
    },
    {
      name: "E",
      value: 20
    },
  ],
}, ];
let counter = 1;
const add_set = (arr) => {
  let copy = JSON.parse(JSON.stringify(arr[0]));
  const random = () => Math.floor(Math.random() * 20 + 1);
  const add = (arr) => {
    counter++;
    copy.values.map((i) => (i.value = random()));
    copy.category = `series_${counter}`;
    arr.push(copy);
  };
  add(arr);
};
add_set(data);

//No.1 define the svg
let graphWidth = 600,
  graphHeight = 300;
let margin = {
  top: 60,
  right: 10,
  bottom: 30,
  left: 45
};
let totalWidth = graphWidth + margin.left + margin.right,
  totalHeight = graphHeight + margin.top + margin.bottom;
let svg = d3
  .select("body")
  .append("svg")
  .attr("width", totalWidth)
  .attr("height", totalHeight);
//No.2 define mainGraph
let mainGraph = svg
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//No.3 define axises
let categoriesNames = data[0].values.map((d) => d.name);
let xScale = d3
  .scalePoint()
  .domain(categoriesNames)
  .range([0, graphWidth]); // scalepoint make the axis starts with value compared with scaleBand
let colorScale = d3.scaleOrdinal(d3.schemeCategory10);
colorScale.domain(data.map((d) => d.category));

let yScale = d3
  .scaleLinear()
  .range([graphHeight, 0])
  .domain([
    d3.min(data, (i) => d3.min(i.values, (x) => x.value)),
    d3.max(data, (i) => d3.max(i.values, (x) => x.value)),
  ]); //* If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword

//No.4 set axises
mainGraph
  .append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + graphHeight + ")")
  .call(d3.axisBottom(xScale));
mainGraph.append("g").attr("class", "y axis").call(d3.axisLeft(yScale));
//No.5 make lines
let lineGenerator = d3
  .line()
  .x((d) => xScale(d.name))
  .y((d) => yScale(d.value))
  .curve(d3.curveMonotoneX);

var lines = mainGraph
  .selectAll(".path")
  .data(data.map((i) => i.values))
  .enter()
  .append("path")
  .attr("d", lineGenerator)
  .attr("fill", "none")
  .attr("stroke-width", 3)
  .attr("stroke", (d, i) => colorScale(i));

//No.6 append circles
let circleData = data.map((i) => i.values);
mainGraph
  // .append("g")
  .selectAll("circle")
  .data(circleData)
  .enter()
  .append("circle")
  .attrs({
    cx: (d) => xScale(d.name),
    cy: (d) => yScale(d.value),
    r: 3,
    opacity: 1,
  });

.line {
  stroke: blue;
  fill: none;
}

<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

标签： d3.jslinechart

Answer 1

首先，您的问题是，对于一条线，您传递了一组数据点，但对于一个圆圈，您传递了一个数据点。简单地应用console.log(circleData)告诉我这circleData是一个数组数组。

---

有多种方法可以使您的代码正常工作。一种是将所有圆形数据点展平为一个数组，使用circleData.flat(). 好处是它是迄今为止最简单的解决方案。缺点是您使用(d, i) => colorScale(i)，i现在搞砸了。

//No.6 append circles
let circleData = data.map((i) => i.values).flat();
mainGraph
  .selectAll("circle")
  .data(circleData)
  .enter()
  .append("circle")
  .attrs({
    cx: (d) => xScale(d.name),
    cy: (d) => yScale(d.value),
    r: 3,
    opacity: 1,
  });

对于线条，i第 1 行变为 0，第 2 行变为 1，依此类推。对于圆圈，我们希望它变为 0 五次，1 五次，但它却变为0, 1, 2, ..., 10. 因为这就是计数器的作用，所以它们很重要。

您可以通过添加一个属性来更改数据，该属性告诉您一个圆属于哪条线，或者您可以倾斜它并将依赖于一条线的所有圆放入一个g元素中。g这意味着为每个线/圆组合附加一个。

它有一些好处。一种是fill可以从该g元素继承，因此您可以继续使用colorScape(i). 另一个是您甚至可以将线条移动到组中，为您提供一种非常简单的方法来突出显示、显示/隐藏或对其执行其他操作。

const data = [{
  category: "series_1",
  values: [{
      name: "A",
      value: 10
    },
    {
      name: "B",
      value: 21
    },
    {
      name: "C",
      value: 19
    },
    {
      name: "D",
      value: 23
    },
    {
      name: "E",
      value: 20
    },
  ],
}, ];
let counter = 1;
const add_set = (arr) => {
  let copy = JSON.parse(JSON.stringify(arr[0]));
  const random = () => Math.floor(Math.random() * 20 + 1);
  const add = (arr) => {
    counter++;
    copy.values.map((i) => (i.value = random()));
    copy.category = `series_${counter}`;
    arr.push(copy);
  };
  add(arr);
};
add_set(data);

//No.1 define the svg
let graphWidth = 600,
  graphHeight = 300;
let margin = {
  top: 60,
  right: 10,
  bottom: 30,
  left: 45
};
let totalWidth = graphWidth + margin.left + margin.right,
  totalHeight = graphHeight + margin.top + margin.bottom;
let svg = d3
  .select("body")
  .append("svg")
  .attr("width", totalWidth)
  .attr("height", totalHeight);
//No.2 define mainGraph
let mainGraph = svg
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//No.3 define axises
let categoriesNames = data[0].values.map((d) => d.name);
let xScale = d3
  .scalePoint()
  .domain(categoriesNames)
  .range([0, graphWidth]); // scalepoint make the axis starts with value compared with scaleBand
let colorScale = d3.scaleOrdinal(d3.schemeCategory10);
colorScale.domain(data.map((d) => d.category));

let yScale = d3
  .scaleLinear()
  .range([graphHeight, 0])
  .domain([
    d3.min(data, (i) => d3.min(i.values, (x) => x.value)),
    d3.max(data, (i) => d3.max(i.values, (x) => x.value)),
  ]); //* If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword

//No.4 set axises
mainGraph
  .append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + graphHeight + ")")
  .call(d3.axisBottom(xScale));
mainGraph.append("g").attr("class", "y axis").call(d3.axisLeft(yScale));
//No.5 make lines
let lineGenerator = d3
  .line()
  .x((d) => xScale(d.name))
  .y((d) => yScale(d.value))
  .curve(d3.curveMonotoneX);

var lines = mainGraph
  .selectAll(".path")
  .data(data.map((i) => i.values))
  .enter()
  .append("path")
  .attr("d", lineGenerator)
  .attr("fill", "none")
  .attr("stroke-width", 3)
  .attr("stroke", (d, i) => colorScale(i));

//No.6 append circles
let circleData = data.map((i) => i.values);
mainGraph
  .selectAll(".circle-container")
  .data(circleData)
  .enter()
  .append("g")
  .attr("class", "circle-container")
  .attr("fill", (d, i) => console.log(d) || colorScale(i))
  .selectAll("circle")
  .data((d) => d)
  .enter()
  .append("circle")
  .attrs({
    cx: (d) => xScale(d.name),
    cy: (d) => yScale(d.value),
    r: 3,
    opacity: 1,
  });

.line {
  stroke: blue;
  fill: none;
}

<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>