所以我修改了这个例子,以便我可以在xAxis上使用scalePoint(而不是scaleLinear,我也改变了代码,这样你只能放大xAxis,我不关心yAxis缩放)：
https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f
一切似乎都在工作,除了缩放,我得到一个未定义的不是这一行上的函数错误：gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
有关如何使用scalePoint进行缩放工作的任何想法？
这是代码：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
text {
fill: black;
}
rect {
fill: steelblue;
}
path.chart__line {
fill: green;
opacity: .3;
stroke: green;
stroke-width: 1.5px;
}
</style>
<svg id="my-svg" width="960" height="500">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0.0%" stop-color="#2c7bb6"></stop>
<stop offset="12.5%" stop-color="#00a6ca"></stop>
<stop offset="25.0%" stop-color="#00ccbc"></stop>
<stop offset="37.5%" stop-color="#90eb9d"></stop>
<stop offset="50.0%" stop-color="#ffff8c"></stop>
<stop offset="62.5%" stop-color="#f9d057"></stop>
<stop offset="75.0%" stop-color="#f29e2e"></stop>
<stop offset="87.5%" stop-color="#e76818"></stop>
<stop offset="100.0%" stop-color="#d7191c"></stop>
</linearGradient>
</defs>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
let xDomain = ['A','B','C'];
let zoomed = () => {
view.attr("transform",d3.event.transform);
gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
// gY.call(yAxis.scale(d3.event.transform.rescaleY(y))); // I don't care about yAxis
};
let resetted = () => {
svg.transition()
.duration(750)
.call(zoom.transform,d3.zoomIdentity);
};
let svg = d3.select("#my-svg"),width = +svg.attr("width"),height = +svg.attr("height");
let zoom = d3.zoom()
.scaleExtent([1,40])
.translateExtent([[0,0],[width,height]])
.on("zoom",zoomed);
let x = d3.scalePoint()
.domain(xDomain)
.range([0,width]);
let y = d3.scaleLinear()
.domain([0,height])
.range([0,height]);
let xAxis = d3.axisBottom(x)
.ticks(xDomain.length)
.tickSize(height)
.tickPadding(8 - height);
let yAxis = d3.axisRight(y)
.ticks(10)
.tickSize(width)
.tickPadding(8 - width);
let view = svg.append("rect")
.attr("class","view")
.attr("x",0)
.attr("y",0)
.attr("width",width)
.attr("height",height);
let gX = svg.append("g")
.attr("class","axis axis--x")
.call(xAxis);
let gY = svg.append("g")
.attr("class","axis axis--y")
.call(yAxis);
d3.select("button")
.on("click",resetted);
svg.call(zoom);
</script>
</body>
</html>
感谢您的时间.
解决方法
如果要使用transformX函数,则需要使用
continuous scale.它使用刻度的反转功能,只有连续刻度才能提供.
虽然你提到你不想使用scaleLinear我测试了它,它似乎工作正常. (我必须启用y缩放来测试这个)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
text {
fill: black;
}
rect {
fill: steelblue;
}
path.chart__line {
fill: green;
opacity: .3;
stroke: green;
stroke-width: 1.5px;
}
</style>
<svg id="my-svg" width="960" height="500">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0.0%" stop-color="#2c7bb6"></stop>
<stop offset="12.5%" stop-color="#00a6ca"></stop>
<stop offset="25.0%" stop-color="#00ccbc"></stop>
<stop offset="37.5%" stop-color="#90eb9d"></stop>
<stop offset="50.0%" stop-color="#ffff8c"></stop>
<stop offset="62.5%" stop-color="#f9d057"></stop>
<stop offset="75.0%" stop-color="#f29e2e"></stop>
<stop offset="87.5%" stop-color="#e76818"></stop>
<stop offset="100.0%" stop-color="#d7191c"></stop>
</linearGradient>
</defs>
</svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
let xDomain = ['A','C'];
let zoomed = () => {
view.attr("transform",d3.event.transform);
gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
gY.call(yAxis.scale(d3.event.transform.rescaleY(y))); // I don't care about yAxis
};
let resetted = () => {
svg.transition()
.duration(750)
.call(zoom.transform,d3.zoomIdentity);
};
let svg = d3.select("#my-svg"),height = +svg.attr("height");
let zoom = d3.zoom()
.scaleExtent([1,40])
.translateExtent([
[0,height]
])
.on("zoom",zoomed);
let x = d3.scaleLinear()
.domain(xDomain)
.range([0,width]);
let y = d3.scaleLinear()
.domain([0,height])
.range([0,height]);
let xAxis = d3.axisBottom(x)
.ticks(xDomain.length)
.tickSize(height)
.tickPadding(8 - height);
let yAxis = d3.axisRight(y)
.ticks(10)
.tickSize(width)
.tickPadding(8 - width);
let view = svg.append("rect")
.attr("class","view")
.attr("x",0)
.attr("y",0)
.attr("width",width)
.attr("height",height);
let gX = svg.append("g")
.attr("class","axis axis--x")
.call(xAxis);
let gY = svg.append("g")
.attr("class","axis axis--y")
.call(yAxis);
d3.select("button")
.on("click",resetted);
svg.call(zoom);
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。