d3矩形とテキストのバージョン4の問題

このメソッドは、v3で動作し、テキストの内部に矩形を追加しますが、v4では失敗します。エラーメッセージ "読み取りプロパティ 'querySelectorAll' 'が表示されますが、このコードとは関係がありません。任意の提案をいただければ幸いです。d3矩形とテキストのバージョン4の問題

group = vis.selectAll(".rectangle") 
     .data(data); 


gEnter = group.enter() 
    .append("g") 
    .attr("class", "rectangle") 
    .attr("fill", function (d) { return d.colour; }); 


gEnter.append("rect") 
    .attr("class", "rectband"); 


group.selectAll(".rectband") 
    .attr("width", 18) 
    .attr("height", 18) 
    .style("opacity", .5) 
    .style("stroke", "black") 
    .style("cursor", "move"); 


svgEnter = group.enter() 
     .append("svg") 
     .attr("height", 18) 
     .attr("class", "interval") 
     .attr("width", 10) 
     .attr("x", 20) 
     .attr("y", 20); 

svgEnter.append("text") 
       .attr("class", "intervalLabel") 
       .attr("x", 6) 
       .attr("y", 14) 
       .style("pointer-events", "none") 
       .text(function (d) { return (d.name); });

出典

2016-07-18 user3359706

あなたのコードちょっと作品が、あなたのテキスト要素は、互いの上に、その内容を表示するには十分な広さではありませんsvgコンテナです。あなたはSVG広い作ればとにかく

は、テキストだけで罰金を示しています。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <script> 
 
    
 
    var vis = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 400) 
 
     .attr('height', 400); 
 
    
 
    group = vis.selectAll(".rectangle") 
 
     .data([ 
 
     { 
 
      colour: 'red', 
 
      name: 'one' 
 
     }, 
 
     { 
 
      colour: 'green', 
 
      name: 'two' 
 
     } 
 
     ]); 
 

 

 
    gEnter = group.enter() 
 
     .append("g") 
 
     .attr("class", "rectangle") 
 
     .attr("fill", function(d) { 
 
     return d.colour; 
 
     }); 
 

 
    gEnter.append("rect") 
 
     .attr("class", "rectband") 
 
     .merge(gEnter) 
 
     .attr("width", 18) 
 
     .attr("height", 18) 
 
     .style("opacity", .5) 
 
     .style("stroke", "black") 
 
     .style("cursor", "move"); 
 

 
    svgEnter = group.enter() 
 
     .append("svg") 
 
     .attr("height", 18) 
 
     .attr("class", "interval") 
 
     .attr("width", 30) 
 
     .attr("x", 20) 
 
     .attr("y", 20); 
 

 
    svgEnter.append("text") 
 
     .attr("class", "intervalLabel") 
 
     .attr("x", 6) 
 
     .attr("y", 14) 
 
     .style("pointer-events", "none") 
 
     .text(function(d) { 
 
     return (d.name); 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-07-18 14:30:37 Mark

をしかし、あなたはV3（<スクリプトSRC = "HTTPに変更した場合：// d3js。 org/d3.v3.min.js "charset =" utf-8 ">）それは矩形を描画しますが、v4では描画しませんか？ – user3359706

ここに作業スクリプトがあります： – user3359706

https://jsfiddle.net/sjp700/rm16L13s/2/ – user3359706

d3矩形とテキストのバージョン4の問題

答えて

関連する問題