div要素が本文の外側に追加されています

データノードの右クリックでリストを実装したいと思います。そうするために、私はd3.jsのd3-context-menuプラグインに出くわしました。私が直面している問題は、div要素がbodyタグの外側に貼り付けられることです。div要素が本文の外側に追加されています

私は前に、このような問題を見たことがありません。私はここに与えられたプラグインの例を以下しています： http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview

これは、ライブラリのドキュメントへのリンクです： https://github.com/patorjk/d3-context-menu

私はそれがこのように動作している理由は見当もつかない。私のコードの構造は次のようになります。それをよく説明するために

eventGroup = focusClip.selectAll(".event").data(data); 

// Enter phase --- 
eventGroupEnter = eventGroup.enter().append("svg"); 
eventGroupEnter.append("rect"); 
eventGroupEnter.append("circle"); 
eventGroupEnter.append("text"); 

// Event Group 
eventGroup 
    .attr("class", "event") 
    .attr("x", function(d) { 
    return parseInt(x(d.time)) - 10; 
    }) // offset for the bg and center of dot 
    .attr("y", function(d) { 
    return parseInt(y(d.plotY)); 
    }) 
    .attr("width", function(d) { 
    return parseInt((d.label.length/2)) + 60 + "em"; 
    }) 
    .attr("height", "20"); 

// Background 
eventGroup.select("rect") 
    .attr("x", 0) // removes the "<rect> attribute x: Expected length, 'NaN'" Error 
    .attr("y", 4) 
    .attr("width", "100%") 
    .attr("height", "12") 
    .attr("fill", "url(#event-bg)"); 

menu = [{ 
    title: "Item #1" 
}]; 
// Dot 
eventGroup.select("circle") 
    .attr("class", "dot") 
    .attr("r", 4) 
    .attr("cx", 10) 
    .attr("cy", 10) 
    .attr("fill", function(d) { 
    return d.evtColor ? d.evtColor : "#229ae5"; 
    }) 
    .attr("stroke", function(d) { 
    return d.evtColor ? d.evtColor : "#229ae5"; 
    }) 
    .attr("stroke-width", 2) 
    .on("contextmenu", d3.contextMenu(menu, function() { 
    console.log("Quick! Before the menu appears!"); 
    })) 
    .on("mouseenter", tooltip.mouseover) 
    .on("mouseleave", tooltip.mouseout) 
    .on("click", annotateBox.click);

私はチャートの画像を追加してい：

右クリックイベントがの「ドット」の部分に呼び出されていますイベント。 div要素が体の外側に追加されるのはなぜですか？

出典

2017-12-20 user2128

は、プラグインのドキュメントへのリンクを共有してください。 –

プラグインへのリンクを共有してくれてありがとう。私は（非常に）素早く見ましたが、何の手がかりも見つけませんでした。これがバグであれば、Githubの問題を開くための適切な答えが得られるかもしれません。 D3 v3を使用していますか？ –

はい私はd3 v3を使用しています。 – user2128

これは設計によるものです。あなたがそのプラグインのsource codeを見れば、あなたはわかります

d3.selectAll('.d3-context-menu').data([1]) 
    .enter() 
    .append('div') 
    .attr('class', 'd3-context-menu');

selectAllのでルートに呼ばれ、divがない<body>に、<html>に追加されます。

したがって、著者は意図的にこれを行ったか、または彼女がd3.selectAllがselection.selectAllとは異なることを忘れていました。

ここでは基本的なデモです。「Run code snippet」をクリックし、ブラウザの開発ツールを開き、スニペットウィンドウを調べます。

d3.selectAll("foo") 
 
    .data([1]) 
 
    .enter() 
 
    .append("div") 
 
    .attr("class", "test")

<script src="https://d3js.org/d3.v3.min.js"></script>

あなたはこの参照つもりだ：

<html> 
    <head>...</head> 
    <body>...</body> 
    <div class="test"></div> 
</html>

出典

2017-12-20 08:16:55

これは意図した動作であることを示唆していますか？その場合でも、右側にダブルスクロールバーが表示され、d3-context-menuが残りの実装のバックグラウンドで実行されていることを示しています。 – user2128

これが意図しているかどうかわかりませんが、私はこれがソースコードで与えられた期待された結果であると言います。これを著者に依頼するGithubの問題を開くことができます。 –

ありがとう！私はgithubに関する質問をしました。何か応答があった場合、ここで更新されます。 – user2128

div要素が本文の外側に追加されています

答えて

関連する問題