传递的参数D3提示回调是完整的数据数组

Argument passed D3-Tip callback is full data array

本文关键字：数据 数组 提示 参数 D3 回调      更新时间：2023-09-26

我正在使用Techan JS，使用d3提示插件。

D3Tip的回调函数传递给整个数据数组，而不是上下文中的对象。我可能把它挂错地方了。

    /* Initialize tooltip */
    var tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
        console.log(d);
        return d;
    });
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;
    var parseDate = d3.time.format("%d-%b-%y").parse,
            timeFormat = d3.time.format('%Y-%m-%d'),
            valueFormat = d3.format(',.2fs');
    var x = techan.scale.financetime()
            .range([0, width]);
    var y = d3.scale.linear()
            .range([height, 0]);
    var candlestick = techan.plot.candlestick()
            .xScale(x)
            .yScale(y);
    var trendline = techan.plot.trendline()
            .xScale(x)
            .yScale(y)
            .on("mouseenter", enter)
            .on("mouseout", out)
            .on("drag", drag);
    var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");
    var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");
    var svg = d3.select("#candle-stick").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 + ")");
    var valueText = svg.append('text')
            .style("text-anchor", "end")
            .attr("class", "coords")
            .attr("x", width - 5)
            .attr("y", 15);

    var data = [
        { date: "9-Jun-14", open: 62.40, high: 63.34, low: 61.79, close: 62.88, volume: 37617413 },
        { date: "6-Jun-14",open: 63.37, high: 63.48, low: 62.15, close: 62.50,volume: 42442096 },
        { date: "5-Jun-14",open: 63.66, high: 64.36, low: 62.82, close: 63.19,volume: 47352368 },
        { date: "4-Jun-14",open: 62.45, high: 63.59, low: 62.07, close: 63.34,volume: 36513991 },
        { date: "3-Jun-14",open: 62.62, high: 63.42, low: 62.32, close: 62.87,volume: 32216707 },
        { date: "2-Jun-14",open: 63.23, high: 63.59, low: 62.05, close: 63.08,volume: 35995537 },
        { date: "30-May-14",open: 63.95, high: 64.17, low: 62.56, close: 63.30,volume: 45283577 }
    ];

    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)); });
    x.domain(data.map(accessor.d));
    y.domain(techan.scale.plot.ohlc(data, accessor).domain());
    svg.append("g")
            .datum(data)
            .attr("class", "candlestick")
            .call(candlestick)
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);
    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Price ($)");
    /* Invoke the tip in the context of your visualization */
    svg.call(tip)
    // functions
    function enter(d) {
        valueText.style("display", "inline");
        refreshText(d);
    }
    function out(d) {
        valueText.style("display", "none");
    }

您可以在上实时查看代码http://jsfiddle.net/sisir/ghox8ewa/1/

（在烛台上悬停时查看控制台）

 /* Initialize tooltip */
var tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
console.log(d);
return d;
});

在上面的工具提示中，您将返回html的d，将其更改为

 /* Initialize tooltip */
var tip = d3.tip().attr('class', 'd3-tip').html(function(d, i) {
return d[i].open;//your required text here
});

希望这就是你想要的。。。。如果不要求更多。

上图中的问题是我们所遵循的方法，我们正在绘制烛台，并通过在下面写代码将工具提示绑定到这个烛台

svg.append("g")
            .datum(data)
            .attr("class", "candlestick")
            .call(candlestick)
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

从上面的代码中，将返回类"candlestick"的"g"（查看写此代码的

var candle=    svg.append("g")
                .datum(data)
                .attr("class", "candlestick")
                .call(candlestick)
console.log(candle);

)我们将工具提示绑定到它，因此它将返回数据（整个数据对象）作为工具提示的参数，为了满足我们的要求，我已经在下面的fiddle中实现并开发了所需的代码http://jsfiddle.net/ghox8ewa/5/

请点击链接并尝试分析。。。。如果你仍然有疑问，请问我更多。

相关文章：