gpt4 book ai didi

javascript - 带有链接焦点/鼠标悬停工具提示的 D3 倍数 : Crosshair focus line not fitting to x-axis

转载 作者:行者123 更新时间:2023-11-30 16:35:19 26 4
gpt4 key购买 nike

我正在尝试合并 this multiples examplethis example 中看到焦点鼠标悬停 + 十字准线功能.我预期的 y 大小的十字准线一直在 x 线上射击。 See working Plunk here .
我的问题似乎出在代码的这一部分(从第 227 行开始),我在其中尝试相对于 yScale 和 yDomain 设置焦点线的终点。

var yDomain = d3.extent(d.values, function(d) { return d.price; });

focus.select('#focusLineX')
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", ys[d.key](yDomain[0]));

但是我不太了解它。这是我的完整代码

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: 0;
}

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}

.area {
//fill: #e7e7e7;
fill: transparent;
}

.overlay {
fill: none;
pointer-events: all;
}

.focus circle {
fill: none;
stroke: red;
r: 4.5;
}

.focusLine {
stroke: blue;
stroke-dasharray: 3,3;
opacity: 0.5;
}
</style>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {
top: 20,
right: 45,
bottom: 20,
left: 40
},
width = 961 - margin.left - margin.right,
height = 138 - margin.top - margin.bottom;
var parseDate = d3.time.format("%b %Y").parse,
bisectDate = d3.bisector(function(d) {
return d.date;
}).left,
formatValue = d3.format(",.2f"),
formatDate = d3.time.format("%X"),
formatCurrency = function(d) {
return formatValue(d);
};

var x = d3.time.scale()
.range([0, width]);

// variable to hold our yscales
var ys = {};

var area = d3.svg.area()
.x(function(d) {
return x(d.date);
})
.y0(height)
.y1(function(d) {
return ys[d.symbol](d.price); //<-- call the y function matched to our symbol
});

var line = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d, i) {
return ys[d.symbol](d.price); //<-- call the y scale function matched to our symbol
});

var xAxis = d3.svg.axis()
.scale(x) // x is the d3.time.scale()
.orient("bottom") // the ticks go below the graph
.ticks(4) // specify the number of ticks
.tickFormat(d3.time.format("%H:%M"));

d3.csv("stocks_chart_komplett.csv", type, function(error, data) {

// Nest data by symbol.
var symbols = d3.nest()
.key(function(d) {
return d.symbol;
})
.entries(data);

// Compute the maximum price per symbol, needed for the y-domain.
symbols.forEach(function(s) {
var maxPrice = d3.max(s.values, function(d) {
return d.price;
});
ys[s.key] = d3.scale.linear() //<-- create a scale for each "symbol" (ie Sensor 1, etc...)
.range([height, 0])
.domain([0, maxPrice]);
});

// Compute the minimum and maximum date across symbols.
// We assume values are sorted by date.
x.domain([
d3.min(symbols, function(s) {
return s.values[0].date;
}),
d3.max(symbols, function(s) {
return s.values[s.values.length - 1].date;
})
]);

// Add an SVG element for each symbol, with the desired dimensions and margin.
var svg = d3.select("body").selectAll("svg")
.data(symbols)
.enter().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 + ")");

// Add the area path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "area")
.attr("d",area);

// Add the line path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
});

// Add a small label for the symbol name.
svg.append("text")
.attr("x", width - 6)
.attr("y", height - 6)
.style("text-anchor", "end")
.text(function(d) {
return "<"+d.key+"> value now: "+d.values[d.values.length - 1].price+" "+d.values[d.values.length - 1].unit;
});

svg.append('g') // create a <g> element
.attr('class', 'x axis') // specify classes
.attr("transform", "translate(0," + height + ")")
.call(xAxis); // let the axis do its thing

// build 4 y axis
var axisGs = svg.append("g"); //<-- create a collection of axisGs

axisGs
.attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(function(d) {
return d.values[d.values.length - 1].unit;
});

axisGs.each(function(d, i) { //<-- for each axisG create an axis with it's scale
var self = d3.select(this);
self.call(
d3.svg.axis()
.scale(ys[d.key])
.orient("left")
.ticks(4)
);
});

var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");

focus.append("circle")

focus.append("text")
.attr("x", 0)
.attr("dy", "-.90em")
.style("font-size","12px")
.style("fill", "grey")
.style("text-anchor", "middle");

svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
focus.style("display", null);
})
.on("mouseout", function() {
focus.style("display", "none");
})
.on("mousemove", mousemove);

// append the x line
focus.append("line")
.attr('id', 'focusLineX')
.attr("class", "focusLine");

// append the y line
focus.append("line")
.attr('id', 'focusLineY')
.attr("class", "focusLine");

function mousemove() {
var date, index,index_diff;
date = x.invert(d3.mouse(this)[0]);
var focus = svg.selectAll(".focus");
focus.attr("transform", function(d) {

index = bisectDate(d.values, date, 0, d.values.length - 1);

var yDomain = d3.extent(d.values, function(d) { return d.price; });

focus.select('#focusLineX')
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", ys[d.key](yDomain[0]));


console.log(yDomain[0]);

//.attr("y2", ys[d.key]);

// focus.select('#focusLineY')
// .attr("x1", -width)
// .attr("y1", 0)
// .attr("x2", width)
// .attr("y2", 0);

//console.log(index, d.values[index].symbol, d.values[index].date, d.values[index].price);
focus.selectAll("text").text(function (d){

return (""+formatDate(d.values[index].date)+", "+d.values[index].price+"")
});
// adjust mouseover to use appropriate scale
return "translate(" + x(d.values[index].date) + "," + ys[d.key](d.values[index].price) + ")"
});
}
});

function type(d) {
d.price = +d.price;
d.date = parseDate(d.date);
return d;
}
</script>
</body>
</html>

任何帮助将不胜感激!谢谢!

最佳答案

您可以借助 svg:clipPath 来完成。我制作了一个 clipPath,它限制了包含折线图的区域,不包括 x 和 y 轴。

行过来的原因是 yDomain[0] 是行的最大 y,并且您正在翻译此行以使其出现在正确的位置,但您不会能够处理在 x 轴外射出的额外线。

focus.select('#focusLineX')
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", ys[d.key](yDomain[0]));

我已经用剪辑路径更新了代码,这里是 fix .

关于javascript - 带有链接焦点/鼠标悬停工具提示的 D3 倍数 : Crosshair focus line not fitting to x-axis,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32783433/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com