Django 热图 d3.js 传递从搜索返回的数据

Question

我正在创建一个可搜索的存储库，在 django (windows) 和 postgresql 中完成搜索后显示热图。我的搜索代码不习惯 HTML.

views.py

def search_result(request):
    if request.method == "POST":
        ChemSearched = request.POST.get('ChemSearched')
        tarname = Bindll.objects.filter(targetnameassignedbycuratorordatasource__contains=ChemSearched)[:10]

        return render(request, 'Search/search_result.html',
            {'ChemSearched':ChemSearched,'tarname':tarname})
    else:
        return render(request, 'Search/search_result.html',{})

Searchresults.html

...

                <br/><br/><br/><br/>
        <strong><h1>{% if ChemSearched %}
            <script>


            var margin = {top: 30, right: 30, bottom: 30, left: 30},
              width = 450 - margin.left - margin.right,
              height = 450 - margin.top - margin.bottom;


            var svg = d3.select("#my_dataviz")
            .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 + ")");
             {% for Bindll in tarname %}


                var myGroups = [  "{{ Bindll }}"  ]
                var myVars = [  "{{ Bindll.ki_nm }}"  ]
             {% endfor %}
               


            var x = d3.scaleBand()
              .range([ 0, width ])
              .domain(myGroups)
              .padding(0.01);
            svg.append("g")
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x))


            var y = d3.scaleBand()
              .range([ height, 0 ])
              .domain(myVars)
              .padding(0.01);
            svg.append("g")
              .call(d3.axisLeft(y));


            var myColor = d3.scaleLinear()
              .range(["white", "#69b3a2"])
              .domain([1,100])


            d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) {

              svg.selectAll()
                  .data(data, function(d) {return d.group+':'+d.variable;})
                  .enter()
                  .append("rect")
                  .attr("x", function(d) { return x(d.group) })
                  .attr("y", function(d) { return y(d.variable) })
                  .attr("width", x.bandwidth() )
                  .attr("height", y.bandwidth() )
                  .style("fill", function(d) { return myColor(d.value)} )

            })

        </script>                   
                        <br>
                        {% for Bindll in tarname %}
                            {{ Bindll }}--{{ Bindll.ki_nm }}-{{ Bindll.ic50_nm }} - {{ Bindll.kd_nm  }} - {{ Bindll.ec50_nm }} - <br>

                        {% endfor %}

                    {% else %}
                                <strong>No Entry</strong>
                        
                {% endif %}

之前从未使用过网络，所以对图表仅显示一个元素的原因有任何帮助，尝试使用 for 循环将值附加到列表中但没有用但它的打印结果非常好，你可以通过任何方式指导我做错了什么，让热图显示我的结果。谢谢

Answer 1

你能不能用这种方式构建你的比例域，看看它是否有效。除了域中可能的错误之外，我没有看到直接的问题：

var myGroups= data.map(d=>d.group).filter((item, i, ar) => ar.indexOf(item) === i),
    myVars = data.map(d=>d.variable).filter((item, i, ar) => ar.indexOf(item) === i);

Django 热图 d3.js 传递从搜索返回的数据

Django heatmap d3.js passing returned data from search

django

postgresql

search

repository

d3.js