Fatal编程技术网
  • javascript/
  • Javascript 如何在D3中的不同行上打印工具提示的内容

Javascript 如何在D3中的不同行上打印工具提示的内容

javascript d3.js

Javascript 如何在D3中的不同行上打印工具提示的内容,javascript,d3.js,Javascript,D3.js,下面是水平堆叠条形图的代码。当我将鼠标悬停在任意一个栏上时，它会在一行中显示元素的内容。我想添加换行符来分隔数据的每个参数。我试着寻找这种类型的问题，发现了一些带有“tspan”的东西，但这在我的代码中不起作用。请看一看 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/

下面是水平堆叠条形图的代码。当我将鼠标悬停在任意一个栏上时，它会在一行中显示元素的内容。我想添加换行符来分隔数据的每个参数。我试着寻找这种类型的问题，发现了一些带有“tspan”的东西，但这在我的代码中不起作用。请看一看

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="lit" uri="/WEB-INF/......" %>
<!DOCTYPE html>
<meta charset="utf-8">
<head>

  <link rel="stylesheet" media="all" type="text/css" href="<c:url value="/styl........."/>" />
</head>

<body>
<script src="//d3js.org/d3.v3.js"></script>
<script>

var i = 0;
var margins = {
    top: 12,
    left: 48,
    right: 24,
    bottom: 24
},
legendPanel = {
    width: 180
},
width = 1500 - margins.left - margins.right - legendPanel.width,
    height = 900 - margins.top - margins.bottom,

    dataset = ${JSONData},

    series = dataset.map(function (d) {
        return d.name;
    }),
    dataset = dataset.map(function (d) {   
        return d.data.map(function (o) {
            return {
                name: d.name,
                y: +o.count,
                x: o.time
            };
        });
    }),
    stack = d3.layout.stack();

stack(dataset);

var dataset = dataset.map(function (group) {
    return group.map(function (d) {
        return {
            name: d.name,
            x: d.y,
            y: d.x,
            x0: d.y0
        };
    });
}),
    svg = d3.select('body')
        .append('svg')
        .attr('width', width + margins.left + margins.right + legendPanel.width)
        .attr('height', height + margins.top + margins.bottom)
        .append('g')
        .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'),
    xMax = d3.max(dataset, function (group) {
        return d3.max(group, function (d) {
            return d.x + d.x0;
        });
    }),
    xScale = d3.scale.linear()
        .domain([0, xMax])
        .range([0, width]),
    months = dataset[0].map(function (d) {
        return d.y;
    }),
    _ = console.log(months),
    yScale = d3.scale.ordinal()
        .domain(months)
        .rangeRoundBands([0, height], .1),
    xAxis = d3.svg.axis()
        .scale(xScale)
        .orient('bottom'),
    yAxis = d3.svg.axis()
        .scale(yScale)
        .orient('left'),
    colours = d3.scale.category10(),
    groups = svg.selectAll('g')
        .data(dataset)
        .enter()
        .append('g')
        .style('fill', function (d, i) {
        return colours(i);
    }),
    rects = groups.selectAll('rect')
        .data(function (d) {
        return d;
    })
        .enter()
        .append('rect')
        .attr('x', function (d) {
        return xScale(d.x0);
    })
        .attr('y', function (d, i) {
        return yScale(d.y);
    })
        .attr('height', function (d) {
        return yScale.rangeBand();
    })
        .attr('width', function (d) {
        return xScale(d.x);
    })
        .on('mouseover', function (d) {
        var xPos = parseFloat(d3.select(this).attr('x')) / 2 + width/2;
        var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() / 2;

        d3.select('#tooltip')
            .style('left', xPos + 'px')
            .style('top', yPos + 'px')
            .select('#value')
            .text("Count: " + d.x + "Time: " + d.y + "String1"+
"\nString2");
            //.text(d.x+","+d.y+","+d.name);        

        d3.select('#tooltip').classed('hidden', false);
    })
        .on('mouseout', function () {
        d3.select('#tooltip').classed('hidden', true);
    })

    svg.append('g')
        .attr('class', 'axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);

svg.append('g')
    .attr('class', 'axis')
    .call(yAxis);

svg.append('rect')
    .attr('fill', 'yellow')
    .attr('width', 160)
    .attr('height', 30 * dataset.length)
    .attr('x', width + margins.left)
    .attr('y', 0);

series.forEach(function (s, i) {
    svg.append('text')
        .attr('fill', 'black')
        .attr('x', width + margins.left + 8)
        .attr('y', i * 24 + 24)
        .text(s);
    svg.append('rect')
        .attr('fill', colours(i))
        .attr('width', 60)
        .attr('height', 20)
        .attr('x', width + margins.left + 90)
        .attr('y', i * 24 + 6);
});

</script>
<div id="tooltip" class="hidden">
    <p><span id="value">100</span>
    </p>
</div>

</body>
</html>


var i=0；
var保证金={
前12名，
左：48，
右：24，
底数：24
},
传奇面板={
宽度：180
},
宽度=1500-margins.left-margins.right-legendPanel.width，
高度=900-页边距。顶部-页边距。底部，
数据集=${JSONData}，
series=dataset.map（函数（d）{
返回d.name；
}),
dataset=dataset.map（函数（d）{
返回d.data.map（函数（o）{
返回{
姓名：d.name，
y:+o.伯爵，
x:o.time
};
});
}),
stack=d3.layout.stack（）；
堆栈（数据集）；
var dataset=dataset.map（函数（组）{
返回组.map（函数（d）{
返回{
姓名：d.name，
x:d.y，
y:d.x，
x0:d.y0
};
});
}),
svg=d3。选择（'body'）
.append（'svg'）
.attr（'width'，width+margins.left+margins.right+legendPanel.width）
.attr（'height'，height+margins.top+margins.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margins.left+'，'+margins.top+'）），
xMax=d3.max（数据集、函数（组）{
返回d3.max（组，函数（d）{
返回d.x+d.x0；
});
}),
xScale=d3.scale.linear（）
.domain（[0，xMax]）
.范围（[0，宽度]），
月份=数据集[0]。映射（函数（d）{
返回d.y；
}),
_=控制台日志（月），
yScale=d3.scale.ordinal（）
.域名（个月）
.rangeRoundBands（[0，高度]，.1），
xAxis=d3.svg.axis（）
.scale（xScale）
.orient（“底部”），
yAxis=d3.svg.axis（）
.刻度（yScale）
.orient（‘左’），
颜色=d3.比例.类别10（），
groups=svg.selectAll（'g'）
.数据（数据集）
.输入（）
.append（'g'）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
}),
rects=组。选择全部（'rect'）
.数据（功能（d）{
返回d；
})
.输入（）
.append（'rect'）
.attr（'x'，函数（d）{
返回xScale（d.x0）；
})
.attr（'y'，函数（d，i）{
返回y刻度（d.y）；
})
.attr（高度），功能（d）{
返回yScale.rangeBand（）；
})
.attr（'width'，函数（d）{
返回x刻度（d.x）；
})
.on（'mouseover'，函数（d）{
var xPos=parseFloat（d3.select（this.attr（'x'））/2+width/2；
var yPos=parseFloat（d3.select（this.attr（'y'））+yScale.rangeBand（）/2；
d3.选择（“#工具提示”）
.style（'left'，xPos+'px'）
.style（'top'，yPos+'px'）
.选择（“#值”）
.text（“计数：+d.x+”时间：+d.y+“字符串1”+
“\n字符串2”）；
//.文本（d.x+“，+d.y+”，“+d.name”）；
d3.选择（“#工具提示”）.classed（'hidden'，false）；
})
.on（'mouseout'，函数（）{
d3.选择（“#工具提示”）.classed（'hidden'，true）；
})
append（'g'）
.attr（'类'，'轴'）
.attr（'transform'，'translate（0'，+height+'））
.呼叫（xAxis）；
append（'g'）
.attr（'类'，'轴'）
.呼叫（yAxis）；
append（'rect'）
.attr（'填充'，'黄色'）
.attr（'宽度'，160）
.attr（'height'，30*dataset.length）
.attr（'x'，宽度+页边距。左）
.attr（'y'，0）；
系列。forEach（函数（s，i）{
append（'text'）
.attr（'填充'，'黑色'）
.attr（'x'，宽度+边距。左侧+8）
.attr（'y'，i*24+24）
.文本；
append（'rect'）
.attr（'填充'，颜色（一））
.attr（'width'，60）
.attr（'height'，20）
.attr（'x'，宽度+边距。左侧+90）
.attr（'y'，i*24+6）；
});
一百
您的“工具提示”只是一个HTML
span
；因此，您所需要做的就是为换行符使用一个

：

d3.select('#tooltip')
  .style('left', xPos + 'px')
  .style('top', yPos + 'px')
  .select('#value')
  .html("Count: " + d.x + "Time: " + d.y + " String1" + "<br>String2");
你的“工具提示”只是一个HTML
span
；因此，您所需要做的就是为换行符使用一个

：

d3.select('#tooltip')
  .style('left', xPos + 'px')
  .style('top', yPos + 'px')
  .select('#value')
  .html("Count: " + d.x + "Time: " + d.y + " String1" + "<br>String2");
我已经尝试过使用.html元素，但它不起作用。我会再试一次的。@Tushar，是什么方法不起作用？我上面发布的工作代码是根据您的代码片段构建的，它工作得很好。如果没有更多细节，我不确定我能帮你什么。对不起。。。我在编辑时犯了一些错误。上面的代码工作得非常好。很抱歉给您带来不便。谢谢您的帮助。在您的解决方案之前，我已将“\n”与.html一起使用，但这不起作用
与.htmlI配合使用效果良好。htmlI已经尝试使用.html元素，但不起作用。我会再试一次的。@Tushar，是什么方法不起作用？我上面发布的工作代码是根据您的代码片段构建的，它工作得很好。如果没有更多细节，我不确定我能帮你什么。对不起。。。我在编辑时犯了一些错误。上面的代码工作得非常好。很抱歉给您带来不便。谢谢您的帮助。在您的解决方案之前，我已将“\n”与.html一起使用，但这不起作用
可以与.html一起使用