我正在尝试在 D3 中水平轴的最左侧和右侧创建两个自定义刻度。
我想要用于刻度的标签并非来 self 的任何数据 - 我只想添加“2015 年第 1 季度”和“2015 年第 2 季度”代替通常从我的 xScale 中提取的内容。
这是一个fiddle以及我用来构建 xAxis 的代码。
现在我的轴上没有显示任何刻度 - 数据似乎是从 tickFormat 函数返回的，但它没有显示，所以我现在很困惑。我不知道我哪里出了问题。
var xAxis = d3.svg.axis().orient("bottom")
// .ticks(2)
.tickValues([2015, 2016])
.tickFormat(function(d) {
console.log("Q1 " + d);
return "Q1" + d;
})
.outerTickSize(0);
最佳答案
这里的问题是您正在设置数字刻度值
.tickValues([2015, 2016])
它基本上会尝试使用 2015 年和 2016 年的值创建一个刻度。
由于您的 xAxis 比例设置为使用以下内容:
xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
它只从您的数据对象返回一个月，因此由于值 [monthValue] 与 [yearValue] 的差异，刻度正在渲染，但在您的视口(viewport)之外。
如果您要使用时间尺度，您需要为该尺度的域提供正确的输入。
// X Axis Scale
var xScale = d3.time.scale().range([0, innerWidth]);
// Axis Function
var xAxis = d3.svg.axis()
.orient("bottom")
.scale(xScale)
.tickFormat(function(d) { // Getting the value of the tick :)
return "Q1:" + mS[d.getMonth()];
});
/*
* Setting the domain of the x scale with a correct Date value
*
* We use nested[0].values which iterates over the values of just
* one hotel and the corresponding dates since the dates are the
* same for the remaining hotels.
*/
xScale.domain(d3.extent(nested[0].values, function (d){
var f = new Date('2012', (d[xColumn] - 1), '01');
return f;
}));
并且不要忘记在您的区域函数中使用相同的方法。
var area = d3.svg.area()
.x(function(d) {
return xScale( new Date('2012', (d[xColumn] - 1), '01'))
})
.y0(function(d) { return yScale(d.y0); })
.y1(function(d) { return yScale(d.y0 + d.y); });
var mS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
var outerWidth = 1000;
var outerHeight = 250;
var margin = { left: 55, top: 5, right: 100, bottom: 60 };
var xColumn = "month";
var yColumn = "tours";
var colorColumn = "name";
var areaColumn = colorColumn;
var xAxisLabelText = "Month";
var xAxisLabelOffset = 48;
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")")
var xAxisLabel = xAxisG.append("text")
.style("text-anchor", "middle")
.attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
.attr("class", "label")
.text(xAxisLabelText);
var colorLegendG = svg.append("g")
.attr("class", "color-legend")
.attr("transform", "translate(403, 5)");
var xScale = d3.time.scale().range([0, innerWidth]);
var yScale = d3.scale.linear().range([innerHeight, 0]);
var colorScale = d3.scale.category10();
var xAxis = d3.svg.axis().orient("bottom").scale(xScale)
.tickFormat(function(d, i, e) {
return "Q1:" + mS[d.getMonth()];
});
var stack = d3.layout.stack()
.y(function (d){ return d[yColumn]; })
.values(function (d){ return d.values; });
var area = d3.svg.area()
.x(function(d) {
return xScale( new Date('2012', (d[xColumn] - 1), '01'))
})
.y0(function(d) { return yScale(d.y0); })
.y1(function(d) { return yScale(d.y0 + d.y); });
function render(data){
var nested = d3.nest()
.key(function (d){ return d[areaColumn]; })
.entries(data);
colorScale.domain(nested.map(function (d){ return d.key; }));
// Reversed the order here so the order matches between legend & areas.
var layers = stack(nested.reverse());
xScale.domain(d3.extent(nested[0].values, function (d){
var f = new Date('2012', (d[xColumn] - 1), '01');
return f;
}));
yScale.domain([0,
d3.max(layers, function (layer){
return d3.max(layer.values, function (d){
return d.y0 + d.y;
});
})
]);
var total = d3.sum(layers, function(layer) {
return d3.sum(layer.values, function(d) {
return d.tours;
});
});
var paths = g.selectAll(".chart-area").data(layers);
paths.enter().append("path").attr("class", "chart-line");
paths.exit().remove();
paths.attr("d", function (d){ return area(d.values); })
.attr("fill", function (d){ return colorScale(d.key); });
xAxisG.call(xAxis);
svg.append("g")
.attr("class", "legend")
.selectAll("text")
.data(layers)
.enter().append("text")
.text(function(d) { return (d.key) + ' (' + d.key + ')'; })
.attr('fill', function(d) { return colorScale(d.key); })
.attr('y', function(d, i) { return 20 * (i + 1); })
.attr('x', "0");
}
var toursByHotel = [
{
"name": "Marriott",
"month": 1,
"tours": 10
},
{
"name": "Marriott",
"month": 2,
"tours": 15
},
{
"name": "Marriott",
"month": 3,
"tours": 8
},
{
"name": "Marriott",
"month": 4,
"tours": 12
},
{
"name": "Marriott",
"month": 5,
"tours": 18
},
{
"name": "Marriott",
"month": 6,
"tours": 25
},
{
"name": "Marriott",
"month": 7,
"tours": 40
},
{
"name": "Marriott",
"month": 8,
"tours": 33
},
{
"name": "Marriott",
"month": 9,
"tours": 25
},
{
"name": "Marriott",
"month": 10,
"tours": 21
},
{
"name": "Marriott",
"month": 11,
"tours": 18
},
{
"name": "Marriott",
"month": 12,
"tours": 14
},
{
"name": "Springhill",
"month": 1,
"tours": 10
},
{
"name": "Springhill",
"month": 2,
"tours": 15
},
{
"name": "Springhill",
"month": 3,
"tours": 8
},
{
"name": "Springhill",
"month": 4,
"tours": 12
},
{
"name": "Springhill",
"month": 5,
"tours": 18
},
{
"name": "Springhill",
"month": 6,
"tours": 25
},
{
"name": "Springhill",
"month": 7,
"tours": 40
},
{
"name": "Springhill",
"month": 8,
"tours": 33
},
{
"name": "Springhill",
"month": 9,
"tours": 25
},
{
"name": "Springhill",
"month": 10,
"tours": 21
},
{
"name": "Springhill",
"month": 11,
"tours": 18
},
{
"name": "Springhill",
"month": 12,
"tours": 14
},
{
"name": "Residence",
"month": 1,
"tours": 10
},
{
"name": "Residence",
"month": 2,
"tours": 15
},
{
"name": "Residence",
"month": 3,
"tours": 8
},
{
"name": "Residence",
"month": 4,
"tours": 12
},
{
"name": "Residence",
"month": 5,
"tours": 18
},
{
"name": "Residence",
"month": 6,
"tours": 25
},
{
"name": "Residence",
"month": 7,
"tours": 40
},
{
"name": "Residence",
"month": 8,
"tours": 33
},
{
"name": "Residence",
"month": 9,
"tours": 25
},
{
"name": "Residence",
"month": 10,
"tours": 21
},
{
"name": "Residence",
"month": 11,
"tours": 18
},
{
"name": "Residence",
"month": 12,
"tours": 14
},
{
"name": "Courtyard",
"month": 1,
"tours": 10
},
{
"name": "Courtyard",
"month": 2,
"tours": 15
},
{
"name": "Courtyard",
"month": 3,
"tours": 8
},
{
"name": "Courtyard",
"month": 4,
"tours": 12
},
{
"name": "Courtyard",
"month": 5,
"tours": 18
},
{
"name": "Courtyard",
"month": 6,
"tours": 25
},
{
"name": "Courtyard",
"month": 7,
"tours": 40
},
{
"name": "Courtyard",
"month": 8,
"tours": 33
},
{
"name": "Courtyard",
"month": 9,
"tours": 25
},
{
"name": "Courtyard",
"month": 10,
"tours": 21
},
{
"name": "Courtyard",
"month": 11,
"tours": 18
},
{
"name": "Courtyard",
"month": 12,
"tours": 14
},
{
"name": "Renaissance",
"month": 1,
"tours": 10
},
{
"name": "Renaissance",
"month": 2,
"tours": 15
},
{
"name": "Renaissance",
"month": 3,
"tours": 8
},
{
"name": "Renaissance",
"month": 4,
"tours": 12
},
{
"name": "Renaissance",
"month": 5,
"tours": 18
},
{
"name": "Renaissance",
"month": 6,
"tours": 25
},
{
"name": "Renaissance",
"month": 7,
"tours": 40
},
{
"name": "Renaissance",
"month": 8,
"tours": 33
},
{
"name": "Renaissance",
"month": 9,
"tours": 25
},
{
"name": "Renaissance",
"month": 10,
"tours": 21
},
{
"name": "Renaissance",
"month": 11,
"tours": 18
},
{
"name": "Renaissance",
"month": 12,
"tours": 14
}
];
render(toursByHotel);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>关于javascript - 自定义刻度、值和格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37141170/