javascript - 在 d3 的烛台图表中鼠标悬停时获取单个烛台的值

Question

我正在尝试获取 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);
    }

我从下拉列表中选择一家公司，然后根据选择更改数据。有什么方法可以让我在鼠标悬停时获得单个烛台的值(value)？

Answer 1

我猜你的代码看起来，你使用的是类似于 http://bl.ocks.org/andredumas/27c4a333b0e0813e093d 的东西

所以它基本上是附加的看起来像烛台的路径。要在鼠标悬停时获取值，您必须使用数据和鼠标位置将值一分为二并获取相应的值。方法如下:

var x0 = x.invert(d3.mouse(this)[0]),
  i = bisectDate(data, x0, 1),
  d0 = data[i - 1],
  d1 = data[i],
  d = x0 - d0.date > d1.date - x0 ? d1 : d0;

当然，使用 Mark 的 https://bl.ocks.org/mbostock/3902569作为引用。修改相同并使用该值添加工具提示这是一个显示我如何完成它的 fork 。

http://bl.ocks.org/shashank2104/a5928e82ef426aabb0103f93a8fb5f0e/71a9150f68fec881652b84d554752d58fa030174

我不确定您是否真的想添加工具提示，但您可以看到获取的值。

希望这对您有所帮助。