Ajax d3 js转换不工作
从Django中的views.py获取数据后,我试图在d3.js中创建一个图形:Ajax d3 js转换不工作,ajax,d3.js,Ajax,D3.js,从Django中的views.py获取数据后,我试图在d3.js中创建一个图形: <div class="col-md-4 col-sm-4 col-xs-12"> <div class="x_panel tile fixed_height_320 overflow_hidden"> <div class="x_title"> <h2>Power<
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel tile fixed_height_320 overflow_hidden">
<div class="x_title">
<h2>Power</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table class="" style="width:100%">
<tr>
<td id="area1" role="button">
<script>
$('#area1').ready(function(){
$.ajax({
type:'GET',
url:'/',
contentType: "application/json; charset=utf-8",
dataType: 'json',
success : function(data)
{
var width = 250,
height = 250,
twoPi = 2 * Math.PI;
var arc1 = d3.svg.arc()
.innerRadius(100)
.outerRadius(120)
.startAngle(0);
var svg1 = d3.select("#area1").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var meter1 = svg1.append("g")
.attr("class", "season-progress");
var background = meter1.append("path")
.datum({endAngle: twoPi})
.style("fill", "#ffb74d")
.attr("d", arc1);
var foreground = meter1.append("path")
.datum({endAngle:0})
.style("fill", "#e65100")
.attr("class", "foreground")
.attr("d", arc1);
foreground.transition()
.duration(1000)
.ease("linear")
.attrTween("d", function(d) {
var interpolate = d3.interpolate(d.endAngle, twoPi * data['ITPOWER'] / data['AVAILABLEPOWER']);
return function(t) {
d.endAngle = interpolate(t);
return arc1(d);
}
});
var text = meter1.append("text")
.attr("text-anchor", "middle")
.attr("dy", "1.5em")
.attr("font-size", "18")
.style('fill','#4B515D')
.text('PuE');
var line2 = meter1.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".10em")
.attr("font-size", "30")
.style('fill','#4B515D')
.text(Math.round(data["PuE"]*100)/100);
}
});
});
</script>
</td>
<td>
<table class="tile_info">
<tr>
<td>
<p> </p>
</td>
<td></td>
</tr>
<tr>
<td>
<p style="color:#e65100;">Used </p>
</td>
<td >{{ power.ITPOWER }}kWh</td>
</tr>
<tr>
<td>
<p style="color:#ffb74d;">Available </p>
</td>
<td>{{ power.AVAILABLEPOWER }}kWh</td>
</tr>
<tr>
<td>
<p style="color:#4B515D;">Usage </p>
</td>
<td>15%</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
权力
-
-
-
-
但当我在html页面上尝试同样的方法时,我得到了我想要的:
请解释为什么当图形是html页面上唯一的元素而不是其他元素时,我能够看到转换。我使用的是一个在线可用的引导模板。该模板使用Jquery查询网页上的其他元素。这些都弄乱了我的d3.js图形。我删除了那些元素,因为我不需要它们。我使用的是一个在线可用的引导模板。该模板使用Jquery查询网页上的其他元素。这些元素弄乱了我的d3.js图表。我删除了那些元素,因为我不需要它们