时间戳

首页 > 解决方案 > 如何连接 d3.js 和 solr json 响应？

javascript - 如何连接 d3.js 和 solr json 响应？

问题描述

<!DOCTYPE html>
<meta charset="utf-8">

<head>
    <style>
        .axis {
            font: 10px sans-serif;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
    </style>
</head>

<body>

    <!--/* adding d3.js lib*/-->
    
     
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
    <script src="https://d3js.org/d3-fetch.v1.min.js"></script>
    <script>


        var margin = { top: 20, right: 20, bottom: 70, left: 40 },
            width = 600 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;


        var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

        var y = d3.scale.linear().range([height, 0]);


        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickFormat(d3.num);




        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(10);



        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 + ")");
        
        
        
        
/* my data on json server
                
           d3.json("https://api.myjson.com/bins/xya14", function (error, data) 
             {

                        alert(data);
                        data.forEach(function (d) {
                        d.num = d.num;
                        d.value = +d.value;
                        alert(d.value);
                    });
 

            x.domain(data.map(function (d) { return d.num; }));
            y.domain([0, d3.max(data, function (d) { return d.value; })]);
               
    */           
              
               
            
/* data on solr server*/               

                
        d3.json("http://192.168.2.4:8983/solr/vkash_collection/select?q=*:*&omitHeader=true", function (error, data) 
             {

                        alert(data);
                        data.forEach(function (d) {
                        d.num = d.num;
                        d.value = +d.value;
                        alert(d.value);
                    });     
               
            x.domain(data.map(function (d) { return d.num; }));
            y.domain([0, d3.max(data, function (d) { return d.value; })]);

               
                        
               
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .selectAll("text")
                .style("text-anchor", "end")
                .attr("dx", "-.8em")
                .attr("dy", "-.55em")
                .attr("transform", "rotate(-90)");

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Value ($)");

            svg.selectAll("bar")
                .data(data)
                .enter().append("rect")
                .style("fill", "steelblue")
                .attr("x", function (d) { return x(d.num); })
                .attr("width", x.rangeBand())
                .attr("y", function (d) { return y(d.value); })
                .attr("height", function (d) { return height - y(d.value); });

        });

    </script>

</body>

我在 solr 中加载了一个 json 文件，它只有两个字段 num 和 value。我使用这个 url 并使用 d3.json("solr url",function (data))..但是我在浏览器上什么也没有。如何连接 d3.js ??

我的 js 代码片段在这里：

在此处输入图像描述

我的 solr url 响应在这里：

在此处输入图像描述

标签： javascripthtmld3.jssolr

解决方案

推荐阅读