Fatal编程技术网
  • python/
  • Python 在django视图中使用d3.js将json数据传递到html模板

Python 在django视图中使用d3.js将json数据传递到html模板

python json django d3.js

Python 在django视图中使用d3.js将json数据传递到html模板,python,json,django,d3.js,visualization,Python,Json,Django,D3.js,Visualization,views.py是 def index(request): fm_ds=Details.objects.filter(Gender='Female',Dept='Software',Shift='Day').count() m_ds=Details.objects.filter(Gender='Male',Dept='Software',Shift='Day').count() Female_dict={} Female_dict['Gender']='Female' Female_dict[

views.py是

def index(request):

fm_ds=Details.objects.filter(Gender='Female',Dept='Software',Shift='Day').count()
m_ds=Details.objects.filter(Gender='Male',Dept='Software',Shift='Day').count()
Female_dict={}
Female_dict['Gender']='Female'
Female_dict['count']=fm_ds
Male_dict={}
Male_dict['Gender']='Male'
Male_dict['count']=m_ds
print Female_dict
print Male_dict
di=[Male_dict,Female_dict]
context = {'data_json': json.dumps(di)}
print context
return render(request, 'index.html', context=context)
输出为：
[{'count'：1，'Gender'：'Male'}，{'count'：2，'Gender'：'Female'}]
现在我需要将这个json传递给d3.js模板，以绘制这种图形。即x轴为女性，y轴为女性

html是

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>


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


var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


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

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// get the data
var data_json = {{ data_json|safe }};
var data=[];
data.push(temp);


  x.domain(data.map(function(d) { return d.gender; }));
  y.domain([0, d3.max(data, function(d) { return d.count; })]);


  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.gender); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.count); })
      .attr("height", function(d) { return height - y(d.count); });


  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));


  svg.append("g")
      .call(d3.axisLeft(y));



</script>
</body>


/*设置CSS*/
.bar{fill:steelblue；}
var margin={顶部：20，右侧：20，底部：30，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scaleBand（）
.范围（[0，宽度]）
.填充（0.1）；
变量y=d3.scaleLinear（）
.范围（[高度，0]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//获取数据
var data_json={{data_json}safe}；
var数据=[]；
数据推送（temp）；
x、 域（data.map（函数（d）{returnd.gender；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.count；}）]；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{return x（d.gender）；}）
.attr（“宽度”，x.带宽（））
.attr（“y”，函数（d）{返回y（d.count）；}）
.attr（“高度”，函数（d）{返回高度-y（d.count）；}）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
svg.append（“g”）
.调用（d3.左（y））；
我得到的只有一个男性/女性的统计图…不是两者都有

我尝试了这个，在index.html中得到了答案

<script>

    var temp = {{ data_json|safe }};
    var data=[]
    data.push(temp);
    console.log(JSON.stringify(data))

</script>


var temp={data_json | safe}}；
var数据=[]
数据推送（temp）；
log（JSON.stringify（数据））
您的上下文是字典中的字典，因此您无法使用d.gender访问它，请检查性别、其性别和非性别，我如何访问它？如果你知道的话，你能帮我吗！我想您不需要这个：
d3.json（数据、函数（错误、数据、json）{
由于
数据_json
将可用-无需通过d3加载。我不记得了，也无法测试它，但如果
数据_json
是字符串，您可以使用json.parse将其加载为json。之后，您可以将数据定义为
var data=data_json[“data_json”]
但我不确定您提供的json结构是否符合您的要求。您不想要类似于
{data\u json'：[{“count”：2，“Gender”：“Female”}，{“count”：2，“Gender”：“Male”}}的东西吗？
？{“count”：2，“Gender”：“Male”}很好。我也尝试了json.parse…它是一样的…没有输出！您能
console.log（data\u json）
在
var data_json={{{data_json | safe}}之后
？它会输出什么吗？