首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Django heatmap d3.js传递搜索返回的数据

Django heatmap d3.js传递搜索返回的数据
EN

Stack Overflow用户
提问于 2021-12-01 13:50:55
回答 1查看 68关注 0票数 0

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

views.py

代码语言:javascript
复制
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

代码语言:javascript
复制
...

                <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 %}

以前从未使用过webs,所以为什么图表只显示一个元素,尝试使用for循环来追加列表中的值,但是它的打印结果非常精细,任何方法都可以指导我做错了什么,使热图显示我的结果。谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-01 18:07:43

你能用这种方式构建你的规模域吗,看看它是否有效。除了领域中可能出现的错误之外,我没有看到眼前的问题:

代码语言:javascript
复制
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);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70185413

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档