D3.js v3到v4笔刷的更改 [英] D3.js v3 to v4 Brush changes
问题描述
我希望从d3v3迁移到d3v4. 特别是我在迁移画笔时遇到困难.
I'm looking to migrate from d3v3 to d3v4. In particular i'm having difficulties in migrating brushes.
有人可以看看下面的链接，让我知道更改吗? http://bl.ocks.org/zanarmstrong/ddff7cd0b1220bc68a58
Can someone please have a look at below link and let me know the changes? http://bl.ocks.org/zanarmstrong/ddff7cd0b1220bc68a58
我发现了一些变化:
d3.time.format-> d3.timeFormat
d3.time.format -> d3.timeFormat
d3.time.scale-> d3.scaleTime
d3.time.scale -> d3.scaleTime
在迁移过程中遇到的问题:
Facing issues in migrating:
d3.svg.brush-> d3.brushX
d3.svg.brush -> d3.brushX
感谢&问候
Naishav
推荐答案
像这样滥用d3.brush似乎很奇怪，因为您可以使用常规事件对其进行更直接的编码:
It seems rather strange to abuse the d3.brush like that when you can code this so much more straightforward with regular events:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #393939;
font-size: 14px;
font-family: 'Raleway', sans-serif;
}
p {
color: white;
margin: 50px;
}
a {
color: #4FDEF2;
}
.axis {
fill: gray;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.axis .halo {
stroke: gray;
stroke-width: 4px;
stroke-linecap: round;
}
.handle path {
stroke: white;
stroke-width: 3px;
stroke-linecap: round;
pointer-events: none;
}
.handle text {
fill: white;
text-align: center;
font
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// parameters
var margin = {
top: 50,
right: 50,
bottom: 50,
left: 50
},
width = 960 - margin.left - margin.right,
height = 300 - margin.bottom - margin.top;
// scale function
var timeScale = d3.scaleTime()
.domain([new Date('2012-01-02'), new Date('2013-01-01')])
.range([0, width])
.clamp(true);
var formatDate = d3.timeFormat("%b %d");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
// classic transform to position g
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("rect")
.style("pointer-events", "all")
.style("fill", "none")
.attr("width", width)
.attr("height", height)
.style("cursor", "crosshair")
.on("mousedown", function(){
updatePos(this);
})
.on("mousemove", function(){
if (d3.event.which === 1){
updatePos(this);
}
});
function updatePos(elem){
var xPos = d3.mouse(elem)[0];
handle.attr('transform', 'translate(' + xPos + ",0)");
text.text(formatDate(timeScale.invert(xPos)));
}
svg.append("g")
.attr("class", "x axis")
// put in middle of screen
.attr("transform", "translate(0," + height / 2 + ")")
// inroduce axis
.call(d3.axisBottom()
.scale(timeScale)
.tickFormat(function(d) {
return formatDate(d);
})
.tickSize(0)
.tickPadding(12)
.tickValues([timeScale.domain()[0], timeScale.domain()[1]]))
.select(".domain")
.select(function() {
console.log(this);
return this.parentNode.appendChild(this.cloneNode(true));
})
.attr("class", "halo");
var handle = svg.append("g")
.attr("class", "handle")
handle.append("path")
.attr("transform", "translate(0," + height / 2 + ")")
.attr("d", "M 0 -20 V 20")
var text = handle.append('text')
.text(formatDate(timeScale.domain()[0]))
.attr("transform", "translate(" + (-18) + " ," + (height / 2 - 25) + ")");
</script>
</body>
</html>
这篇关于D3.js v3到v4笔刷的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
