この参照を使用して散布図を作成しました。コードはv3で非常にうまく機能しましたが、v4に変更した後、ツールチップ、x軸、y軸が表示されません。
プランカーを作成しました。誰かがそれの何が悪いのか教えてくれれば幸いです。
function showTooltip (d, i) {
//Save the chosen circle (so not the voronoi)
var element = d3.selectAll(".countries."+d.CountryCode);
//Define and show the tooltip
$(element).popover({
placement: 'auto top',
container: '#chart',
trigger: 'manual',
html : true,
content: function() {
return "<span style='font-size: 12px; text-align: center;'>" + "<span>" + "Speaker: " + "</span>" + d.Speaker + "\n"
+ "<span>" + "Duration: " + "</span>" + Math.round(d.Duration) + "\n" +"</span>"; }
});
$(element).popover('show');
//Make chosen circle more visible
element.style("opacity", 1)
.style("stroke-width", 6);
更新：
これは、v4d3のこの散布図の修正バージョンです。私はラリーの助けを借りてそれを修正しました。
にとって ：
x軸とy軸が表示されない
削除するだけです：
.axis .domain {
display: none;
}
スタイルから
にとって ：
ツールチップ、行
showtooltip関数内の変更：
var element = d3.select(".countries."+d.CountryCode);
//Define and show the tooltip
$(element.node()).popover({
placement: 'auto top',
container: '#chart',
trigger: 'manual',
html : true,
content: function() {
return "<span style='font-size: 12px; text-align: center;'>" + "<span>" + "Speaker: " + "</span>" + d.Speaker + "\n"
+ "<span>" + "Duration: " + "</span>" + Math.round(d.Duration) + "\n" +"</span>"; }
});
$(element.node()).popover('show');
//Make chosen circle more visible
element.style("opacity", 1)
.style("stroke-width", 6);
//Append lines to bubbles that will be used to show the precise data points
//vertical line
d3.select(".chordWrapper").append("g")
.attr("class", "guide")
.append("line")
.attr("x1", element.attr("cx"))
.attr("x2", element.attr("cx"))
.attr("y1", +element.attr("cy"))
.attr("y2", (height))
.style("stroke", element.style("fill"))
.style("opacity", 0)
.style("pointer-events", "none")
.transition().duration(200)
.style("opacity", 0.5);
//horizontal line
d3.select(".chordWrapper").append("g")
.attr("class", "guide")
.append("line")
.attr("x1", +element.attr("cx"))
.attr("x2", 0)
.attr("y1", element.attr("cy"))
.attr("y2", element.attr("cy"))
.style("stroke", element.style("fill"))
.style("opacity", 0)
.style("pointer-events", "none")
.transition().duration(200)
.style("opacity", 0.5);
そして追加：
.on("mouseover", showTooltip)
.on("mouseout", removeTooltip);
あなたのサークルに（script.js行84）
ここを見てください：
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加