Question

我试图更改代码以在DIV中呈现柱形图，但是它不起作用。

原始代码有效：

<html>
<style>
body {
  margin: 15px;
  background-color: #FFFFFF   
}

.bar.estudo_caracterizacao { fill: #f8e487; } 
.bar.desv_experimental { fill: #e0eef5; }
.bar.pesquisa { fill: #98c7dc; }
.bar.teste_prototipo { fill: #49606a; }

.axis path,
.axis line {
  fill: none;
  stroke: #D4D8DA;
  stroke-width: 1px;
  shape-rendering: crispEdges;
  display: none;
}
</style>

<body>

<svg width="160" height="100"></svg>

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

<script>

var svg = d3.select("svg"),
    margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = +svg.attr("width") - margin.left - margin.right,
   height = +svg.attr("height") - margin.top - margin.bottom;


var margin = {top: 0, right: 0, bottom: 0, left: 0},
 width = 160 - margin.left - margin.right,
 height = 100 - margin.top - margin.bottom;

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleBand().range([height, 0]);

var g = svg.append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var  data=[
    {label: 'teste_prototipo', name: "", n: 50}, //Teste de Protótipo à Plena Operação
    {label: 'desv_experimental', name: " ", n: 80}, //Desenv. Experimental
    {label: 'pesquisa', name: "  ", n: 60}, //Pesquisa
    {label: 'estudo_caracterizacao',name: "   ", n: 100} //Estudo e Caracterização
];

   x.domain([0, d3.max(data, function(d) { return d.n; })]);
   y.domain(data.map(function(d) { return d.name; })).padding(0.1);

    g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(5).tickFormat(function(d) { return parseInt(d / 1000); }).tickSizeInner([-height]));

    g.append("g")
        .attr("class", "y axis")
        .call(d3.axisLeft(y));

g.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", function(d, i) {return "bar " + d.label;})
  .attr("x", 0)
  .attr("height", y.bandwidth())
  .attr("y", function(d) { return y(d.name); })
  .attr("width", function(d) { return x(d.n); });

 g.selectAll(".text")
    .data(data)
    .enter()
    .append("text")
    .attr("x", 5)
    .attr("y", function(d) { return y(d.name)+16; })
    .text( function(d) {return d.n;})
    .attr("font-size", "15px")
    .style("text-shadow","0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff")
    .attr("font-weight","bold")
    .attr("fill","#1a3781");

 g.selectAll(".bar").data(data).transition().duration(1000)
 g.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", function(d, i) {return "bar " + d.label;})
  .attr("x", 0)
  .attr("height", y.bandwidth())
  .attr("y", function(d) { return y(d.name); })
  .attr("width", function(d) { return x(d.n); })
  .attr("opacity",1);

 g.selectAll(".text")
    .data(data)
    .enter()
    .append("text")
    .attr("x", 5)
    .attr("y", function(d) { return y(d.name)+16; })
    .text( function(d) {return d.n;})
    .attr("font-size", "15px")
    .style("text-shadow","0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff")
    .attr("font-weight","bold")
    .attr("fill","#1a3781");


function render_column_chart(){

 data=[
    {label: 'teste_prototipo', name: "", n: 40}, //Teste de Protótipo à Plena Operação
    {label: 'desv_experimental', name: " ", n: 60}, //Desenv. Experimental
    {label: 'pesquisa', name: "  ", n: 80}, //Pesquisa
    {label: 'estudo_caracterizacao',name: "   ", n: 10} //Estudo e Caracterização
];

  g.selectAll(".bar").data(data).transition().duration(1000)
  g.selectAll('text')
    .data(data).exit().remove();

 g.selectAll(".bar").transition()
  .duration(300)
  .attr("width", function(d) { return x(d.n);})
  .attr("opacity",1);

 g.selectAll('text')
  .data(data).remove(); 

 g.selectAll(".text")
    .data(data)
    .enter()
    .append("text")
    .attr("x", 5)
    .attr("y", function(d) { return y(d.name)+16; })
    .text( function(d) {return d.n;})
    .attr("font-size", "15px")
    .style("text-shadow","0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff")
    .attr("font-weight","bold")
    .attr("fill","#1a3781");
}

setTimeout(render_column_chart,4000);

</script>
</body>
</html>

这是一个柱形图，在4秒后更改值。但是在这段代码中，图表以svg呈现。我正在尝试在div内渲染。

我更改了这部分代码：

var svg = d3.select("svg"),
    margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

对此：

var svg = d3.select("#grafico_colunas").append("svg")
  .attr("width", 160).attr("height", 100);

var margin = {top: 0, right: 0, bottom: 0, left: 0},
 width = 160 - margin.left - margin.right,
 height = 100 - margin.top - margin.bottom;

这部分：

<svg width="160" height="100"></svg>

对此：

<div id="grafico_colunas'></div>

但是图形无法渲染。发生了什么事？

带有d3.json的错误柱形图未呈现

0 个答案: