Вызовите Django View из события on3.click D3.js на Heatmap - PullRequest
Новая
       26

Вызовите Django View из события on3.click D3.js на Heatmap

0 голосов
/ 28 мая 2019

Есть ли способ вызвать представление Django и передать ему параметр (ы) из обработчика события on3.lick D3.js, связанного с тепловой картой?Для моей тепловой карты я использую код, найденный по следующему адресу:

https://www.d3 -graph-gallery.com / graph / heatmap_style.html

Любая помощьбудет принята с благодарностью.Спасибо.

1 Ответ

0 голосов
/ 28 мая 2019

Это код JavaScript, который делает запрос HTTP при нажатии на прямоугольник. Используйте библиотеку jquery (я использую здесь, в этом примере $.ajax({}) - это функция jQuery). Вы также можете использовать Javascript's XMLHttpRequest class, чтобы сделать AJAX call. Вы должны просто пройти правильный URL из Django's просмотра. Кроме того, используйте GET запрос для тестирования, чтобы избежать CSRF Особенности Django. 

<script>

        // set the dimensions and margins of the graph
        var margin = {top: 80, right: 25, bottom: 30, left: 40},
          width = 450 - margin.left - margin.right,
          height = 450 - margin.top - margin.bottom;

        // append the svg object to the body of the page
        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 + ")");

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

          // Labels of row and columns -> unique identifier of the column called 'group' and 'variable'
          var myGroups = d3.map(data, function(d){return d.group;}).keys()
          var myVars = d3.map(data, function(d){return d.variable;}).keys()

          // Build X scales and axis:
          var x = d3.scaleBand()
            .range([ 0, width ])
            .domain(myGroups)
            .padding(0.05);
          svg.append("g")
            .style("font-size", 15)
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x).tickSize(0))
            .select(".domain").remove()

          // Build Y scales and axis:
          var y = d3.scaleBand()
            .range([ height, 0 ])
            .domain(myVars)
            .padding(0.05);
          svg.append("g")
            .style("font-size", 15)
            .call(d3.axisLeft(y).tickSize(0))
            .select(".domain").remove()

          // Build color scale
          var myColor = d3.scaleSequential()
            .interpolator(d3.interpolateInferno)
            .domain([1,100])

          // create a tooltip
          var tooltip = d3.select("#my_dataviz")
            .append("div")
            .style("opacity", 0)
            .attr("class", "tooltip")
            .style("background-color", "white")
            .style("border", "solid")
            .style("border-width", "2px")
            .style("border-radius", "5px")
            .style("padding", "5px")

          // Three function that change the tooltip when user hover / move / leave a cell
          var mouseover = function(d) {
            tooltip
              .style("opacity", 1)
            d3.select(this)
              .style("stroke", "black")
              .style("opacity", 1)
          }
          var mousemove = function(d) {
            tooltip
              .html("The exact value of<br>this cell is: " + d.value)
              .style("left", (d3.mouse(this)[0]+70) + "px")
              .style("top", (d3.mouse(this)[1]) + "px")
          }
          var mouseleave = function(d) {
            tooltip
              .style("opacity", 0)
            d3.select(this)
              .style("stroke", "none")
              .style("opacity", 0.8)
          }

          // add the squares
          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("rx", 4)
              .attr("ry", 4)
              .attr("width", x.bandwidth() )
              .attr("height", y.bandwidth() )
              .style("fill", function(d) { return myColor(d.value)} )
              .style("stroke-width", 4)
              .style("stroke", "none")
              .style("opacity", 0.8)
            .on("mouseover", mouseover)
            .on("mousemove", mousemove)
            .on("mouseleave", mouseleave)
            .on("click", function(arg1, arg2, arg3) {
                console.log('clicked !!!');
                // make AJAX call now !
                $.ajax({
                    type: 'GET',
                    url: '<DJANGO_VIEW_URL_HERE>',
                    data: {'key1': 'val1', 'key2': 'val2'},
                    success: function(data) {
                        console.log('server returned status code 200');
                    },
                    error: function() {
                        console.log('problem on server during processing');
                    }
                });
            })
        })

        // Add title to graph
        svg.append("text")
                .attr("x", 0)
                .attr("y", -50)
                .attr("text-anchor", "left")
                .style("font-size", "22px")
                .text("A d3.js heatmap");

        // Add subtitle to graph
        svg.append("text")
                .attr("x", 0)
                .attr("y", -20)
                .attr("text-anchor", "left")
                .style("font-size", "14px")
                .style("fill", "grey")
                .style("max-width", 400)
                .text("A short description of the take-away message of this chart.");
        </script>

Удачи.

...