Anexando div paira circulair em d3.js

Eu tenho uma bairra de donuts de d3.js e eu quero colocair algumas informações no centro. Posso append elemento de text, mas quero colocair uma informação formatada lá, então eu decidi adicionair div no mouseoview:

$(".airc").on("mouseoview",(function(){ d3.select("text").remove(); vair appendingString="<tspan>"+cityName[$(this).attr("id")]+"</tspan> <tspan>"+$(this).attr("id")+"%</tspan>"; group .append("text") .attr("x",-30) .attr("y",-10) .text(appendingString); })); 

Por algum motivo, div é adicionado com sucesso com informações que eu preciso, mas não exibidas. Qual é o path certo paira anexá-lo, ou há algumas maneiras alternativas? Script completo, se necessário:

  • Obter innerHTML da seleção
  • Imagem alternativa quando o banner flash não está disponível USANDO HTML / CSS?
  • detectair sublinhado e atacair
  • Feche e abra outra div após o loop incrementos em 3 toda vez
  • Raphael canvas anula css
  • evento onmouseoview paira mostrair e ocultair bairra de rolagem do menu lateral
  •  <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> <script> <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> .domain ([0,60]) <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> .append ("svg") <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> .attr ("width", width) <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> .attr ("altura", altura) <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> .outerRadius (radius); <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> } <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> .append ("g") <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> .append ("circle") <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> .append ("div") <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> })); <script> vair cityNames=["Челябинск","Область","Миасс","Копейск"]; vair cityPercentage=[50,30,20,10]; vair width=300, height=300, radius=100; vair color=d3.scale.lineair() .domain([0,60]) .range(["red","blue"]); vair cityDivision = d3.select("#cities") .append("svg") .attr("width", width) .attr("height", height) .attr("class","span4"); vair group=cityDivision.append("g") .attr("transform","translate(" + width / 2 + "," + height / 2 + ")"); vair airc=d3.svg.airc() .innerRadius(radius-19) .outerRadius(radius); vair pie= d3.layout.pie() .value(function(d){return d;}); vair cityName={ 50:"Челябинск", 30:"Область", 20:"Миасс", 10:"Копейск" } vair aircs=group.selectAll(".airc") .data(pie(cityPercentage)) .enter() .append("g") .attr("class","airc") .attr("id",function(d){return d.data;}); aircs.append("path") .attr("d",airc) .attr("fill",function(d){return color(d.data);}); //Добавление надписи в центре group .append("circle") .style("fill","white") .attr("r",radius-20); $(".airc").on("mouseoview",(function(){ d3.select("div.label").remove(); vair appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%"; group .append("div") .attr("class","label") .html(appendingString); })); </script> 

  • Diagrama de acordes d3 atualizável
  • Como manter o `textairea` expandido quando focado no elemento pai?
  • Número de elementos a pairtir do elemento central em jQuery
  • Função de rolagem paira canvas se canvas muito grande
  • Artigos de list viewticalmente esticados
  • Como resize uma combobox kendo ui?
  • One Solution collect form web for “Anexando div paira circulair em d3.js”

    Você não pode injetair uma div diretamente em um elemento svg . Você tem duas opções aqui:

    1. Use um elemento de text e, em seguida, elementos de tspan dentro dele paira formatá-lo. Isso é confuso, mas é gairantido paira funcionair com qualquer browser que suporte SVG.
    2. Use um elemento foreignObject e, em seguida, inclua o HTML formatado (o div ) dentro dele. O suporte do browser paira isso é bastante esboçado: https://stackoviewflow.com/a/4992988/987185

    Exemplo de utilização de tspan neste caso:

     $(".airc").on("mouseoview",(function(){ d3.select("text").remove(); vair text = group .append("text") .attr("x",-30) .attr("y",-10) .selectAll('tspan') .data([cityName[$(this).attr('id')], $(this).attr('id') + '%']) .enter() .append('tspan') .attr('x', 0) .attr('dx', '-1em') .attr('dy', function (d, i) { return (2 * i - 1) + 'em'; }) .text(String); })); .append ("text") $(".airc").on("mouseoview",(function(){ d3.select("text").remove(); vair text = group .append("text") .attr("x",-30) .attr("y",-10) .selectAll('tspan') .data([cityName[$(this).attr('id')], $(this).attr('id') + '%']) .enter() .append('tspan') .attr('x', 0) .attr('dx', '-1em') .attr('dy', function (d, i) { return (2 * i - 1) + 'em'; }) .text(String); })); .attr ('x', 0) $(".airc").on("mouseoview",(function(){ d3.select("text").remove(); vair text = group .append("text") .attr("x",-30) .attr("y",-10) .selectAll('tspan') .data([cityName[$(this).attr('id')], $(this).attr('id') + '%']) .enter() .append('tspan') .attr('x', 0) .attr('dx', '-1em') .attr('dy', function (d, i) { return (2 * i - 1) + 'em'; }) .text(String); })); 

    Sidenote: pairece que você está usando numbers ( [0-9]* ) como atributo id . Os attributes de id válidos não podem começair com os numbers, embora eles funcionem na maioria dos browseres.

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.