用javascript开发Actigram(D3，chart，plotly...)

dnph8jn4 于 2023-04-20 发布在 Chart.js

关注(0)|答案(1)|浏览(135)

我想在列中绘制多个图-最终结果将是一个Actigram。我认为D3.js是我想要使用的库-并且我可以按照下面的代码绘制多个图（只有一些测试数据-如果有一个聪明的方法来双重绘制我们最终拥有的时间序列数据，请告诉我）。然而，它们是单独的svg。有没有办法使其成为一个svg？
非常开放的其他图书馆，如果有一个更容易的方法。

const signalData = [{
    name: "Signal 1",
    data: [1, 2, 3, 4, 5, 6, 7],
  },
  {
    name: "Signal 2",
    data: [2, 3, 1, 4, 5, 1, 3],
  },
  {
    name: "Signal 3",
    data: [1, 7, 2, 6, 3, 5, 4],
  },
];

// This is a line generator. Normally, you pass the x- and y-scales in,
// see also d3-scale on github
const line = d3.line()
  // The first argument is always the datum object, the second is the index
  // Note that I use the index to determine the x coordinate of each point here
  .x((d, i) => i * 50)
  // And the datum object for the y-coordinate
  .y(d => 150 - (15 * d));

// The term `datum` is unrelated to date, but is the singular value of `data`.
// One datum, many data.

d3.select("#plotsHere")
  .selectAll("svg")
  // Append one svg per array entry, look up the so-called enter, update, exit
  // cycle for this. It's the most complex part of d3
  .data(signalData)
  .enter()
  .append("svg")
  // Execute a custom function for each element. People who are new to d3.js
  // over-use this function, very often you don't need it!
  .each(function(d, i) {
    // I pass the current svg element, the datum object, and the index for convenience
    draw(d3.select(this), d, i);
  });

function draw(svg, data, index) {
  // Append a label, set the text to the name
  svg.append("text")
    .attr("x", 20)
    .attr("y", 20)
    .text(d => d.name);

  // Append a path, take the datum of the svg, pick it's `data` property,
  // which is the array of numbers, and set that as the datum of the path,
  // then call the line generator
  svg.append("path")
    .datum(d => d.data)
    .attr("d", line);
}

path {
  stroke: darkblue;
  stroke-width: 2px;
  fill: none;
}

svg {
  border: solid 2px red;
}

#plotsHere {
  display: grid;
  grid-auto-flow: row;
  grid-gap: 0px;
  grid-template-rows: 150px 150px;
  grid-template-columns: 300px 300px;
}

<script src="https://d3js.org/d3.v7.min.js"></script>
<body>
  <div id="plotsHere">
  </div>
</body>

chart.js

来源：https://stackoverflow.com/questions/75991729/develop-actigram-with-javascript-d3-chart-plotly

1条答案

按热度按时间

6pp0gazn1#

你可以使用svg g标签添加群组：

const signalData = [
    {
        name: "Signal 1",
        data: [1, 2, 3, 4, 5, 6, 7],
    },
    {
        name: "Signal 2",
        data: [2, 3, 1, 4, 5, 1, 3],
    },
    {
        name: "Signal 3",
        data: [1, 7, 2, 6, 3, 5, 4],
    },
];

const color = d3.scaleOrdinal(d3.schemeCategory10);

const line = d3.line()
    .x((d, i) => i * 50)
    .y(d => 150 - (15 * d));

const svg = d3.select("#plot");
svg.selectAll("g")
    .data(signalData)
    .enter()
    .append("g")
    .each(function (d, i) {
        draw(d3.select(this), d, i);
    });

function draw(group, data, index) {
    group.append("text")
        .attr("x", 20 + index * 90)
        .attr("y", 20)
        .text(d => d.name);

    group.append("path")
        .datum(data.data)
        .attr("d", line)
        .attr("stroke", color(index))
        .attr("stroke-width", 2)
        .attr("fill", "none");
}

svg {
        border: solid 2px red;
    }

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

<div id="plotsHere"><svg id="plot"></svg> </div>

赞(0）回复(0）举报 2023-04-20

我来回答

用javascript开发Actigram(D3，chart，plotly...)

1条答案

相关问题

热门标签

最新问答