D3.js缩放与序数轴不工作-缩放行为的比例设置问题
D3.js zoom with Ordinal axis not working - Issue with setup of scale in zoom behavior?
我正在尝试创建一个简单的缩放图表,具有时间缩放的x轴和有序的y轴(字符串数组)。该图表与实值y轴配合良好,但当我使用序数y轴时,我得到一个
Uncaught TypeError: undefined is not a function
我花了很多时间在这个问题上,并缩小了问题的范围,但就是看不到解决方案。我想知道是否有D3专家可以帮助我看到光明。
对于专家读者来说,异常发生在d3.v3.js的第1344行rescale函数中。
function rescale() {
if (x1) x1.domain(x0.range().map(function(x) {
return (x - view.x) / view.k;
}).map(x0.invert));
if (y1) y1.domain(y0.range().map(function(y) {
return (y - view.y) / view.k;
}).map(y0.invert));
};
因为。map(y0.invert)行中没有定义y0。
我的代码中的罪魁祸首似乎是我设置我的序数缩放函数的方式,并在缩放事件处理程序中使用它。这是我的y轴序数缩放轴设置和缩放函数片段。
var y = d3.scale.ordinal()
.domain(ordinals)
.rangePoints([height - margin.top - margin.bottom, 0]);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickPadding(8);
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 4])
.on("zoom", zoomed);
错误发生在缩放行为调用我的"缩放"函数之前。
在缩放函数中,如果我注释掉.y(y)
图表正确缩放x轴,但当然y轴不缩放,因为我没有给缩放行为我的序数尺度,y。我不确定我需要做什么来纠正这一点。有人能帮忙吗?
我在下面包含了完整的JavaScript。非常感谢任何人谁可以帮助我看到我的方式的错误!
var data = [
{ "date": "2012-03-20", "total": 3, "initiative": 0 },
{ "date": "2012-03-21", "total": 8, "initiative": 0 },
{ "date": "2012-03-22", "total": 2, "initiative": 1 },
{ "date": "2012-03-23", "total": 10, "initiative": 1 },
{ "date": "2012-03-24", "total": 3, "initiative": 2 },
{ "date": "2012-03-25", "total": 20, "initiative": 2 }
];
var ordinals = ["a", "b", "c"];
var margin = { top: 40, right: 40, bottom: 40, left: 40 },
width = 600,
height = 500;
var x = d3.time.scale()
.domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
.rangeRound([0, width - margin.left - margin.right]);
var y = d3.scale.ordinal()
.domain(ordinals)
.rangePoints([height - margin.top - margin.bottom, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(d3.time.days, 1)
.tickFormat(d3.time.format('%a %d'))
.tickSize(0)
.tickPadding(8);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickPadding(8);
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 4])
.on("zoom", zoomed);
var svg = d3.select('body').append('svg')
.attr('class', 'chart')
.attr('width', width)
.attr('height', height)
.attr('transform', 'translate(' + margin.left + ',' + margin.bottom + ')')
.call(zoom);
svg.append("rect")
.attr('fill', 'none')
.attr('stroke', 'blue')
.attr("width", width)
.attr("height", height);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(' + margin.left + ',' + (height - margin.top) + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + margin.left + ',' + margin.bottom + ')')
.call(yAxis);
map = svg.selectAll('.chart')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function (d) { return x(new Date(d.date)) + margin.left; })
.attr('y', function (d) { return y(ordinals[d.initiative]) + margin.bottom; })
.attr('width', 50)
.attr('height', 25);
var clip = map.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("id", "clip-rect")
.attr('stroke', 'red')
.attr("width", width - margin.right - margin.left)
.attr("height", height - margin.top - margin.bottom)
.attr('transform', 'translate(' + margin.left + ',' + margin.bottom + ')');
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 4])
.on("zoom", zoom);
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
map.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
map.attr("clip-path", "url(#clip)");
我认为你不能在序数轴上缩放/平移。
一种解决方法是制作一个线性标度,并使其看起来像一个有序标度。
像这样定义你的序数:
var ordinals = ["a", "b", "c"];
用线性标度代替有序标度:
var yscale = d3.scale.linear()
.domain([0, ordinals.length])
.range([height - margin.top - margin.bottom, 0]);
接下来,当您使用yscale时,请使用tick格式返回您选择的标签。
var yAxis = d3.svg.axis()
.scale(yscale)
.orient('left')
.tickFormat(function(d) {
return ordinals[d];//now for 0 it will return 'a' for 1 b and so on...
})
.tickPadding(8);
让你的缩放使用新的y刻度,像这样:
var zoom = d3.behavior.zoom()
.x(x)
.y(yscale)
.scaleExtent([1, 20])
.on("zoom", zoomed);
隐藏所有没有标签的刻度
var hideTicksWithoutLabel = function() {
//hide ticks without label
svg.selectAll(".y .tick")[0].forEach(function(g) {
if (d3.select(g).select("text").text() == "") {
d3.select(g).style("display", "none");
} else {
d3.select(g).style("display", "");
}
})
}
现在在缩放后调用这个函数。
这里的工作代码
相关文章:
- 动态设置谷歌地图缩放
- 从结果集中自动设置谷歌地图缩放
- 高图表 - 在缩放重置中设置最大值和最小值
- jquery ui地图设置缩放级别
- 如何平滑地设置HTML5画布fillText()的缩放动画
- 在D3中设置缩放功能后,如何删除缩放功能
- 如何在谷歌地图中设置标记的最佳缩放
- 如何为您的网站/视口设置最小宽度,并在宽度低于该宽度时进行浏览器缩放
- 如何使用 Gmap4rails 设置缩放级别
- 缩放时设置元素的重力
- 如何设置加载 JSON 图层的最小缩放比例
- 当我更改默认缩放设置时,Google Maps JavaScript API 不会缩放
- 从 C# 代码隐藏设置传单缩放区域
- 根据屏幕/设备宽度设置谷歌地图API V3缩放级别
- 如何在窗口缩小/缩放级别小于 1 时将窗口缩放设置为默认值
- 如何在新的谷歌地图上设置默认缩放级别
- 在 Vis.js 中设置缩放级别
- 将元素的宽度设置为等于监视器大小,而不会在缩放时发生变化
- 背景大小设置为包含的正文标签上的位置和缩放元素
- CSS或如何修复浏览器具有不同DPI/缩放设置时的外观