Я пытаюсь получить такие значения, как закрытие высокого минимума и открытие единственной свечи на графике свечей в d3. При наведении курсора я хочу эти значения. Для этого мне нужно однозначно идентифицировать каждую свечу, чтобы при наведении курсора мыши я мог получить значения для этой конкретной свечи. Мой код, как показано ниже.
Я попытался добавить элемент группы к каждой свече, но безуспешно.
$(document).ready(function () {
//alert("In document ready");
var option = '<option value="0">--select --</option>'; //filling the drop down for company list
d3.csv("companies.csv", function (data) {
//var z = "a.us.txt";
//console.log(data.z);
for (var i = 0; i < data.length; i++) {
// console.log(data[i].companies);
option += '<option Value="' + data[i].companies + '">' + data[i].companies + '</option>'
}
$('#det').html(option);
});
createCandleStickChart(); // Creating candle chart
})
var margin, width, height, parseDate, x, y, candlestick, xAxis, yAxis, svg;
var link = "https://raw.githubusercontent.com/Diksha1206/Stocks-Viz/master/Data/";
var selectedcompany;
function createCandleStickChart() {
margin = { top: 20, right: 20, bottom: 30, left: 50 }, //Setting margin width and height
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
parseDate = d3.timeParse("%Y-%m-%d"); // Parsing the data as year month and day
x = techan.scale.financetime() // Scaling a axis.Setting x from 0 to width defined
.range([0, width]); //techan.scale.financetime plots only points available in the data's date domain without linear (weekend, market holiday) gaps.
y = d3.scaleLinear() // Scaling y-axis to Linear timescale
.range([height, 0]);
candlestick = techan.plot.candlestick() //techan.plot.candlestick - construct a candlestick.
.xScale(x)
.yScale(y);
xAxis = d3.axisBottom() //Creating x-axis
.scale(x);
yAxis = d3.axisLeft() //Creating y axis
.scale(y);
svg = d3.select("#candle").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 + ")");
svg.on("brush", function (value) {
alert("Clicked in brush");
})
}
$('select[name="Companydropdown"]').change(function () {
document.getElementById("candle").innerHTML = "";
selectedcompany = $(this).val();
var linktogo = link + selectedcompany;
//alert(linktogo);
createCandleStickChart();
d3.csv(linktogo, function (error, data) { //providing the link of the selected data from the dropdown
var accessor = candlestick.accessor();
data = data.slice(0, 200).map(function (d) {
return {
date: parseDate(d.Date),
open: +d.Open,
high: +d.High,
low: +d.Low,
close: +d.Close,
volume: +d.Volume
};
}).sort(function (a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });
//svg.selectAll('.candlestick')
//.data(data)
//.enter().append('g')
//.attr('class', 'candlestick')
//.on('mouseover', function (d) {
// console.log(d);
//})
svg.append("g")
.attr("class", "candlestick")
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")");
svg.append("g")
.attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
draw(data.slice(0, data.length - 20));
d3.select("button").on("click", function () { draw(data); }).style("display", "inline");
});
})
function draw(data) {
x.domain(data.map(candlestick.accessor().d));
y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain()); svg.selectAll("g.candlestick").datum(data).append("g").call(candlestick).on('mouseover', function (d) {
alert("Mouseover");
console.log("clicking on", d);
});
svg.selectAll("g.x.axis").call(xAxis);
svg.selectAll("g.y.axis").call(yAxis);
}
Я выбираю компанию из выпадающего списка, а затем изменяю данные в соответствии с выбором. Есть ли способ получить значение для одной свечи при наведении курсора?