D3提示|传递一个可变 [英] d3 tooltip | passing in a variable

问题描述

我有4 D3图表每11个不同地区的网页。其中一个图表是一个面积图和code段是：

I have a webpage with 4 d3 charts for each of 11 different regions. One of those charts is an area chart and the code snippet is:

for (mm=0; mm<regions.length; mm++) {

    areas.append("path")
        .attr("class",function(d,i){ return "area cons ar"+i+" region"+mm;} )
        .attr("id", function(d,i) { return "area_"+i+"_"+mm})
        .attr("d", function(d,i) { return area(d)} );

    var test = d3.selectAll("path.region"+mm)
    .call(d3.helper.tooltip()
        .attr("class", function(d, i) { return "tooltip"; })
        .text(function(d, i){ 

            console.log(mm);

            return "i "+consSubProducts[i]+', i: '+i;}));
}

我要提示添加到图表。在该地区的剧情，每个地区都有不同的产品。有些有7个产品，人有我5.需要用毫米变量在其运行时的数值（0-10）来调用正确的产品阵列，其中consSubProducts目前。 （ConsSubProducts在顶部设置为不同的产品阵列的用于...循环，但与毫米，code只能看到最后集阵列和不运行时的阵列。）

I want to add tooltips to the charts. In the area plot, each region has different products. Some have 7 products, others have 5. I need to use the mm variable at its runtime values (0-10) to call the correct product array where consSubProducts is currently. (ConsSubProducts is set to a different product array at the top of the for...loop, but as with mm, the code can only see the finally-set array and not the runtime arrays.)

在此code，毫米总是返回11，即它返回毫米的最终价值，而不是在运行时的值。

In this code, mm always returns 11, i.e. it returns the final value of mm rather than the values at runtime.

我曾尝试过毫米提示中（）和的.text（功能（D，I，毫米）以内 - 显然是后者并不因为它是预期第j工作，我也试着连接毫米的类。一个对象或ID，但（）调用的console.log内（本）记录object.window。

I have tried passing mm in within tooltip() and within .text(function(d,i,mm) - the latter clearly doesn't work as it's expecting a j. I've also tried attaching mm to the class or ID of an object, but within the call() console.log(this) logs object.window.

我试过修改tooltip.js不过虽然我可以生成标签我想我不能工作了如何覆盖文本。 Tooltip.js：

I've tried modifying tooltip.js but although I can generate the label I want I can't work out how to override the text. Tooltip.js:

d3.helper = {};

d3.helper.tooltip = function(){
    var tooltipDiv;
    var bodyNode = d3.select('body').node();
    var attrs = {};
    var text = '';
    var styles = {};

    function tooltip(selection){

        selection.on('mouseover.tooltip', function(pD, pI){
            var name, value;
            // Clean up lost tooltips
            d3.select('body').selectAll('div.tooltip').remove();
            // Append tooltip
            tooltipDiv = d3.select('body').append('div');
            tooltipDiv.attr(attrs);
            tooltipDiv.style(styles);
            var absoluteMousePos = d3.mouse(bodyNode);
            tooltipDiv.style({
                left: (absoluteMousePos[0] + 10)+'px',
                top: (absoluteMousePos[1] - 15)+'px',
                position: 'absolute',
                'z-index': 1001
            });
            // Add text using the accessor function, Crop text arbitrarily
            tooltipDiv.style('width', function(d, i){ return (text(pD, pI).length > 80) ? '300px' : null; })
                .html(function(d, i){return text(pD, pI);});
        })
        .on('mousemove.tooltip', function(pD, pI){
            // Move tooltip
            var absoluteMousePos = d3.mouse(bodyNode);
            tooltipDiv.style({
                left: (absoluteMousePos[0] + 10)+'px',
                top: (absoluteMousePos[1] - 15)+'px'
            });
            // Keep updating the text, it could change according to position
            tooltipDiv.html(function(d, i){ return text(pD, pI); });
        })
        .on('mouseout.tooltip', function(pD, pI){
            // Remove tooltip
            tooltipDiv.remove();
        });

    }

    tooltip.attr = function(_x){
        if (!arguments.length) return attrs;
        attrs = _x;
        return this;
    };

    tooltip.style = function(_x){
        if (!arguments.length) return styles;
        styles = _x;
        return this;
    };

    tooltip.text = function(_x){
        if (!arguments.length) return text;
        text = d3.functor(_x);
        return this;
    };

    return tooltip;
};

任何帮助AP preciated！

Any help appreciated!

推荐答案

它看起来这是方式在上面的东西是超级简单。除非我失去了一些东西。让我张贴一些code，因为我是如何处理的工具提示。
predefine在HTML页面和类的提示DIV它.tooltip和应用的CSS 显示：无;位置：绝对的; 并添加 .tooltip.show {显示：块;}

It looks like this is way over the top for something that is super simple. Unless I'm missing something. Let me post some code for how I handle tooltips. Predefine the tooltip div in the page HTML and class it .tooltip and apply the css of display:none; position:absolute; and add .tooltip.show{display:block;}

var tooltip = d3.select('.tooltip');
function tipUpdate(d,i) {
 tooltip.classed('show',true).html(d+" : "+i);
}

areas.append('path')
 //all your path attributs
 .on('mouseover', tipUpdate)
 .on('mouseout', function() { tooltip.classed('show',false); });

areas.on('mousemove', function(d,i) {
  var mouse = d3.mouse('body').map( function(d) { return parseInt(d); });
  tooltip.attr("style", "left:"+(mouse[0]+10)+"px;top:"+(mouse[1]-15)+"px");
});

这将显示在路径的鼠标悬停提示DIV和它在体内的位置，当鼠标离开路径的相对移动工具提示和隐藏工具提示。它将在它是目前在路径显示的点的数据和索引。你可能想改变这种状况，但它应该很容易。

This will show the tooltip div on mouseover of the path and move the tooltip relative to it's position in the body and hide the tooltip when the mouse leaves the path. It will display the data and index of the point in the path that it is currently over. You might want to change that but it should be easy.

一个问题我想过以后是你不能做这样的工作提示的道路。它将总是从在路径中的最后一个点显示数据。
我已经发布了一个工作提琴。 D3提示

One problem I thought about later is you cannot do a working tooltip like this on a path. It will always show the data from the last point in the path. I have posted a working fiddle. D3 tooltip

这篇关于D3提示|传递一个可变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！