缩放适合多折线图显示中数据的 y 轴

Question

The multiple line chart example at https://www.d3-graph-gallery.com/graph/line_smallmultiple.html quite clearly provides the examples I need for what I'm trying to do... https://www.d3-graph-gallery.com/graph/line_smallmultiple.html 上的多折线图示例非常清楚地提供了我想要做的事情所需的示例......

except...除了...

I need the y-axis scale for each of the charts to be appropriate for the data associated with the individual keys.我需要每个图表的 y 轴刻度适合与各个键关联的数据。 As is, the example does d3.max on the entire data set, not the filtered data set controlling the individual lines.照原样，该示例对整个数据集执行 d3.max，而不是控制各个行的过滤数据集。

I've tried various ways to apply the filter in the y-axis definition and can't get anything to work.我尝试了各种方法来在 y 轴定义中应用过滤器，但没有任何效果。

The closest I've been able to get is to make it use the max value from one of the specific keys for all the charts.我能够得到的最接近的是让它使用来自所有图表的特定键之一的最大值。

  var y = d3.scaleLinear()                                                      
//  .domain([0, d3.max(data, function(d) { return +d.n; })])                    
    .domain([0, d3.max(data.filter(d => d.name === "Helen"), e => +e.n)])       
    .range([ height, 0 ]);                                                      
  svg.append("g")                                                               
    .call(d3.axisLeft(y).ticks(5));

I think I want it to filter d.name against the CURRENT-CHART key (whatever it might be) rather than a specific one (like "Helen" above), but can't figure out how to do it.我想我希望它根据 CURRENT-CHART 键（无论它是什么）而不是特定键（如上面的“Helen”）过滤 d.name，但不知道该怎么做。 Is it some feature of nesting that I haven't found yet?这是我还没有发现的嵌套功能吗？ Something amazingly simple that I can't see??一些我看不到的非常简单的东西？

Any suggestions?有什么建议？

Thanks in advance提前致谢

Answer 1

I have built a demo for you, i hope you are looking for something like this.我已经为你构建了一个演示，我希望你正在寻找这样的东西。 Please let me know if there is any issue.如果有任何问题，请告诉我。

 // set the dimensions and margins of the graph var margin = {top: 30, right: 0, bottom: 30, left: 50}, width = 210 - margin.left - margin.right, height = 210 - margin.top - margin.bottom; //Read the data d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv", function(data) { // group the data: I want to draw one line per group var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor .key(function(d) { return d.name;}) .entries(data); // What is the list of groups? allKeys = sumstat.map(function(d){return d.key}) // Add X axis --> it is a date format var x = d3.scaleLinear() .domain(d3.extent(data, function(d) { return d.year; })) .range([ 0, width ]); // color palette var color = d3.scaleOrdinal() .domain(allKeys) .range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999']) // Add an svg element for each group. The will be one beside each other and will go on the next row when no more room available var svg = d3.select("#my_dataviz") .selectAll("uniqueChart") .data(sumstat) .enter() .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .each(multiple); svg .append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x).ticks(3)); // Add titles svg .append("text") .attr("text-anchor", "start") .attr("y", -5) .attr("x", 0) .text(function(d){ return(d.key)}) .style("fill", function(d){ return color(d.key) }) function multiple(item) { var svg = d3.select(this); var y = d3.scaleLinear() .domain([0, d3.max(item.values, function(d) { return +dn; })]) .range([height, 0]); svg.append("g") .call(d3.axisLeft(y).ticks(5)); var line = d3.line() .x(function(d) { return x(+d.year); }) .y(function(d) { return y(+dn); }); // Draw the line svg .append("path") .attr("fill", "none") .attr("stroke", function(d){ return color(d.key) }) .attr("stroke-width", 1.9) .attr("d", line(item.values)) } })

 <!DOCTYPE html> <meta charset="utf-8"> <!-- Load d3.js --> <script src="https://d3js.org/d3.v4.js"></script> <!-- Create a div where the graph will take place --> <div id="my_dataviz"></div>

缩放适合多折线图显示中数据的 y 轴

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-02-12 15:56:45

缩放适合多折线图显示中数据的 y 轴

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-02-12 15:56:45

解决方案1
0 已采纳 2020-02-12 15:56:45