javascript - d3 条形图 y 轴刻度线和高于最大值的网格线-6ren

javascript - d3 条形图 y 轴刻度线和高于最大值的网格线

转载作者：太空宇宙更新时间：2023-11-04 14:28:40

在我的 d3 条形图中，我应该有 Y 轴动态刻度线和整数值的网格线(小数值没有刻度线和网格线)。最高栏的顶部也应该有刻度线和网格线。

在我的示例图表中，我将最大值传递给 y 轴域函数，如果最大值没有达到下一个范围，我如何才能确保多一条线并打勾。

Fiddle One这里第二根柱线的总值为 53，所以我预计在 55 处还有一个价格变动点和线。

Fiddle Two对于同一张图表，如果数据低于 10，它会在小数点处出现线条，例如 2.5、3.5 等。如何排除这些线条。

这里的刻度是根据值计算的。

// Setup svg using Bostock's margin convention

var margin = {top: 20, right: 160, bottom: 35, left: 30};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
  .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 + ")");


/* Data in strings like it would be if imported from a csv */

var data = [
  { year: "2006", redDelicious: "10", mcintosh: "15", oranges: "9", pears: "6" },
  { year: "2007", redDelicious: "12", mcintosh: "18", oranges: "9", pears: "14" },
  { year: "2008", redDelicious: "05", mcintosh: "20", oranges: "8", pears: "2" },
  { year: "2009", redDelicious: "01", mcintosh: "15", oranges: "5", pears: "4" },
  { year: "2010", redDelicious: "02", mcintosh: "10", oranges: "4", pears: "2" },
  { year: "2011", redDelicious: "03", mcintosh: "12", oranges: "6", pears: "3" },
  { year: "2012", redDelicious: "04", mcintosh: "15", oranges: "8", pears: "1" },
  { year: "2013", redDelicious: "06", mcintosh: "11", oranges: "9", pears: "4" },
  { year: "2014", redDelicious: "10", mcintosh: "13", oranges: "9", pears: "5" },
  { year: "2015", redDelicious: "16", mcintosh: "19", oranges: "6", pears: "9" },
  { year: "2016", redDelicious: "19", mcintosh: "17", oranges: "5", pears: "7" },
];

var parse = d3.time.format("%Y").parse;


// Transpose the data into layers
var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) {
  return data.map(function(d) {
    return {x: parse(d.year), y: +d[fruit]};
  });
}));


// Set x, y and colors
var x = d3.scale.ordinal()
  .domain(dataset[0].map(function(d) { return d.x; }))
  .rangeRoundBands([10, width-10], 0.02);

var y = d3.scale.linear()
  .domain([0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })])
  .range([height, 0]);

var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];


// Define and draw axes
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickSize(-width, 0, 0)
  .tickFormat(d3.format("d"));

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.time.format("%Y"));

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);


// Create groups for each series, rects for each segment 
var groups = svg.selectAll("g.cost")
  .data(dataset)
  .enter().append("g")
  .attr("class", "cost")
  .style("fill", function(d, i) { return colors[i]; });

var rect = groups.selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y0 + d.y); })
  .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
  .attr("width", x.rangeBand())
  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] - 15;
    var yPosition = d3.mouse(this)[1] - 25;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d.y);
  });


// Draw legend
var legend = svg.selectAll(".legend")
  .data(colors)
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", function(d, i) {return colors.slice().reverse()[i];});

legend.append("text")
  .attr("x", width + 5)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "start")
  .text(function(d, i) { 
    switch (i) {
      case 0: return "Anjou pears";
      case 1: return "Naval oranges";
      case 2: return "McIntosh apples";
      case 3: return "Red Delicious apples";
    }
  });


// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
  .attr("class", "tooltip")
  .style("display", "none");

tooltip.append("rect")
  .attr("width", 30)
  .attr("height", 20)
  .attr("fill", "white")
  .style("opacity", 0.5);

tooltip.append("text")
  .attr("x", 15)
  .attr("dy", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold");

最佳答案

问题一

您可能不得不使用 tickValues传递您自己的自定义刻度。如果您总体上对 d3 的工作方式感到满意，您可以添加一个额外的检查来扩展数组:

var ticks = y.ticks(),
  lastTick = ticks[ticks.length-1],
  newLastTick = lastTick + (ticks[1] - ticks[0]);
if (lastTick<y.domain()[1]){
  ticks.push(newLastTick);
}
y.domain([y.domain()[0], newLastTick]); //<-- adjust domain for further value

// Define and draw axes
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickSize(-width, 0, 0)
  .tickFormat( function(d) { return d } )
  .tickValues(ticks);

运行代码:

// Setup svg using Bostock's margin convention

var margin = {top: 15, right: 160, bottom: 35, left: 30};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
  .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 + ")");


/* Data in strings like it would be if imported from a csv */

var data = [
  { year: "2006", redDelicious: "10", mcintosh: "15", oranges: "9", pears: "6" },
  { year: "2007", redDelicious: "12", mcintosh: "18", oranges: "9", pears: "14" },
  { year: "2008", redDelicious: "05", mcintosh: "20", oranges: "8", pears: "2" },
  { year: "2009", redDelicious: "01", mcintosh: "15", oranges: "5", pears: "4" },
  { year: "2010", redDelicious: "02", mcintosh: "10", oranges: "4", pears: "2" },
  { year: "2011", redDelicious: "03", mcintosh: "12", oranges: "6", pears: "3" },
  { year: "2012", redDelicious: "04", mcintosh: "15", oranges: "8", pears: "1" },
  { year: "2013", redDelicious: "06", mcintosh: "11", oranges: "9", pears: "4" },
  { year: "2014", redDelicious: "10", mcintosh: "13", oranges: "9", pears: "5" },
  { year: "2015", redDelicious: "16", mcintosh: "19", oranges: "6", pears: "9" },
  { year: "2016", redDelicious: "19", mcintosh: "17", oranges: "5", pears: "7" },
];

var parse = d3.time.format("%Y").parse;


// Transpose the data into layers
var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) {
  return data.map(function(d) {
    return {x: parse(d.year), y: +d[fruit]};
  });
}));


// Set x, y and colors
var x = d3.scale.ordinal()
  .domain(dataset[0].map(function(d) { return d.x; }))
  .rangeRoundBands([10, width-10], 0.02);

var y = d3.scale.linear()
  .domain([0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })])
  .range([height, 0]);

var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];

var ticks = y.ticks(),
    lastTick = ticks[ticks.length-1],
    newLastTick = lastTick + (ticks[1] - ticks[0]);
if (lastTick<y.domain()[1]){
  ticks.push(newLastTick);
}
y.domain([y.domain()[0], newLastTick]);

// Define and draw axes
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickSize(-width, 0, 0)
  .tickFormat( function(d) { return d } )
  .tickValues(ticks);


var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.time.format("%Y"));

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);


// Create groups for each series, rects for each segment 
var groups = svg.selectAll("g.cost")
  .data(dataset)
  .enter().append("g")
  .attr("class", "cost")
  .style("fill", function(d, i) { return colors[i]; });

var rect = groups.selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y0 + d.y); })
  .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
  .attr("width", x.rangeBand())
  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] - 15;
    var yPosition = d3.mouse(this)[1] - 25;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d.y);
  });


// Draw legend
var legend = svg.selectAll(".legend")
  .data(colors)
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });
 
legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", function(d, i) {return colors.slice().reverse()[i];});
 
legend.append("text")
  .attr("x", width + 5)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "start")
  .text(function(d, i) { 
    switch (i) {
      case 0: return "Anjou pears";
      case 1: return "Naval oranges";
      case 2: return "McIntosh apples";
      case 3: return "Red Delicious apples";
    }
  });


// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
  .attr("class", "tooltip")
  .style("display", "none");
    
tooltip.append("rect")
  .attr("width", 30)
  .attr("height", 20)
  .attr("fill", "white")
  .style("opacity", 0.5);

tooltip.append("text")
  .attr("x", 15)
  .attr("dy", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold");

svg {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
  }
 
  path.domain {
    stroke: none;
  }
 
  .y .tick line {
    stroke: #ddd;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

问题二

同样，您可以让 d3 提出报价，然后过滤掉您不想要的报价:

var ticks = y.ticks().filter(function(d){
  return parseInt(d) === d; // is it a integer?
})

// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(-width, 0, 0)
.tickValues(ticks);

运行代码:

// Setup svg using Bostock's margin convention

var margin = {top: 20, right: 160, bottom: 35, left: 30};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
  .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 + ")");


/* Data in strings like it would be if imported from a csv */

var data = [
  { year: "2006", redDelicious: "1", mcintosh: "3" },
  { year: "2007", redDelicious: "2", mcintosh: "1"},
  { year: "2008", redDelicious: "0", mcintosh: "2"}
];

var parse = d3.time.format("%Y").parse;


// Transpose the data into layers
var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) {
  return data.map(function(d) {
    return {x: parse(d.year), y: +d[fruit]};
  });
}));


// Set x, y and colors
var x = d3.scale.ordinal()
  .domain(dataset[0].map(function(d) { return d.x; }))
  .rangeRoundBands([10, width-10], 0.02);

var y = d3.scale.linear()
  .domain([0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })])
  .range([height, 0]);

var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];

var ticks = y.ticks().filter(function(d){
	return parseInt(d) === d;
})

// Define and draw axes
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickSize(-width, 0, 0)
  .tickValues(ticks);
  
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.time.format("%Y"));

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);


// Create groups for each series, rects for each segment 
var groups = svg.selectAll("g.cost")
  .data(dataset)
  .enter().append("g")
  .attr("class", "cost")
  .style("fill", function(d, i) { return colors[i]; });

var rect = groups.selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y0 + d.y); })
  .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
  .attr("width", x.rangeBand())
  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] - 15;
    var yPosition = d3.mouse(this)[1] - 25;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d.y);
  });


// Draw legend
var legend = svg.selectAll(".legend")
  .data(colors)
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });
 
legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", function(d, i) {return colors.slice().reverse()[i];});
 
legend.append("text")
  .attr("x", width + 5)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "start")
  .text(function(d, i) { 
    switch (i) {
      case 0: return "Anjou pears";
      case 1: return "Naval oranges";
      case 2: return "McIntosh apples";
      case 3: return "Red Delicious apples";
    }
  });


// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
  .attr("class", "tooltip")
  .style("display", "none");
    
tooltip.append("rect")
  .attr("width", 30)
  .attr("height", 20)
  .attr("fill", "white")
  .style("opacity", 0.5);

tooltip.append("text")
  .attr("x", 15)
  .attr("dy", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold");

  svg {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
  }
 
  path.domain {
    stroke: none;
  }
 
  .y .tick line {
    stroke: #ddd;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

关于javascript - d3 条形图 y 轴刻度线和高于最大值的网格线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42737082/

文章推荐： C++ : variable template parameters (for genetic algorithm)

文章推荐： java - 如何提供一个优雅的时区选择器？

文章推荐： c++ - 使用 SDL 的硬件缓冲，关于它如何工作的问题

文章推荐： java - WSO2 Balana 文档

python - 列表中两个切片的最小值/最大值/最大值
我有一个像 [3,10,4,3,9,15,6,13] 这样的列表，我想找到两个不重叠的系列/序列给出通过取最大-最小值可获得的最大值.它们必须是连续的，因此您不能从 1 中减去项目 3。但是您可以从
python - 行的 Pandas 最大值，前 n 最大值
我正在尝试创建顶部列，这是几个列行的最大值。 Pandas 有一个方法 nlargest但我无法让它成行工作。 Pandas 也有 max和 idxmax这正是我想做的，但仅限于绝对最大值。 df =
Android 位置、经度(最小值、最大值)、纬度(最小值、最大值)
我在使用 Android 时遇到了一点问题。我有我的 GPS 位置，明确的经纬度，以及以米为单位的搜索射线(例如 100 米)，可以吗？想象一下我在射线形成的圆心的位置，我会知道如何在 Andro
data-structures - 有效允许拉取所有范围(最小值、最大值)的最佳数据结构，使得值 >= 最小值和值 <= 最大值？
假设我有一组最小值和最大值。我想要一个数据结构，在给定外部值的情况下，它会最有效地为我提供值 >= 最小值、值 = 最小值和值 <= 最大值？，我们在Stack Overflow上找到一个类似的问题：
最大值:扩展嵌套求和
我有以下 Maxima 代码: m:sum(x[i],i,1,N)/N; 然后我想计算 $m^2$。 m2:m^2, sumexpand; 然后我得到双重求和: sum(sum(x[i1]*x[i2]
python从嵌套字典中获取最小/最大值
如何从嵌套字典中获取一个值的最小值/最大值，该字典的缺失值也包含“Nan”？ *这是供引用，我找到了一个解决方案，我想我应该在这里分享它，因为我在 stackoverflow 上的任何地方都找不到答案
最大值:区分特定索引位置的总和
在千里马 12.04.0 我有一个总和 mysum : sum(u[i]^2, i, 1, N); 现在我区分它 diff(mysum, u[i]); 现在我指定一个定义的索引 i=A 来区分它 at
MySQL在时间轴上选择最小值、最大值
是否可以根据时间轴获取最小和最大时间戳？我将在 parking 场示例中进行解释。 +---------------------+------+--------+-------+-----------
MySQL 最大值
基本上在几个领域有几个日期 SELECT MAX(MAX(DATE_A),MAX(DATE_B)) from table DATE_A 和 DATE_B 是日期，我基本上想要日期 A 或日期 B 的最
Jquery 最大值
我创建了一个小测试，其中一个 div 根据滚动深度滑动。我只是想知道怎么设置 A) 起点 (scrolltop = x something) B) 如何设置最大值？ var pxlCount = 0
CLOCK_MONOTONIC 最大值
由于达到最大值，clock_gettime() 何时会使用 CLOCK_MONOTONIC 返回一个较小的值？我不是指被描述为错误的小扭曲，而是类似于计数器重置的东西。它是时间测量的，还是与滴答的绝
angularjs $timeout 最大值
我正在使用 angularjs，尤其是 $timeout 服务(setTimeout 的包装器)。它的工作原理如下: angular.module('MyApp').controller('MyCo
generics - 未知类型的最小值/最大值
是否有可能获得 MinValue - 或 MaxValue未知的 T 型？如 Int其中有 Int.MinValue和 Int.MaxValue ?? 谢谢最佳答案正如@mpilquist 在上面
sql - 优化查询以获取最小值/最大值
我的数据为员工: id Name -------- 1 xyz 2 abc 3 qaz Employee_A:(Eid - 员工表，title - 职称表) eid active
excel - 如何找到每天的最小值/最大值？
我有一个日期和时间行列表，每天有多行。对于每个唯一日期，我想获取最小和最大时间值。如何在 Excel v10(又名 2002)中执行此操作？最佳答案首先，您可以使用 Excel 函数 MIN(
SQL:显示标准偏差内的平均值和最小值/最大值
我有以下 SQL 表 - Date StoreNo Sales 23/4 34 4323.00 23/4 23 5
Crossfilter - 如何找到最小值/最大值
我可能错过了一些微不足道的东西。我想我还没有完全理解一些基本的交叉过滤器概念无论如何，我创建了一个带有几个维度的交叉过滤器，并在维度上使用过滤器。我现在想知道过滤值(不是键)的最小值/最大值。我将
matlab - 插值结果如何大于或小于原始信号的最小值/最大值？
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 9 年前。 Improve t
沿轴的 Numpy 最大值
我在这里错过了什么吗？我希望以下代码段中的 np.max 会返回 [0, 4] ... >>> a array([[1, 2], [0, 4]]) >>> np.max(a,
python - 在列表列表中按索引查找最小值/最大值
给定大小为 2 的列表列表，我试图找到通过索引确定最小/最大值的最快方法。目标是确定一系列 XY 点的边界/范围。子列表未排序(按一个索引排序并不能保证另一个索引已排序)。目前我正在做以下事情:

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - d3 条形图 y 轴刻度线和高于最大值的网格线