使用带有d3.js的SPARQL查询的JSON结果

时间:2015-11-25 19:51:03

标签: javascript html json d3.js sparql

我有这个问题,我正在尝试使用"数据"我从SPARQL查询中得到一个如下所示的图:

Bubble Chart

如果我先下载.json文件,然后用它来制作图表,我就可以这样做,但不是这样。

<?xml version="1.0" encoding="ISO-8859-1" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
     <title>Contratos Zaragoza</title>
     <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
     <script src="d3/d3.min.js"></script>
     <style>
          .boton{margin-top:1em;}
     </style>
</head>
<body>
        <script src="js/jquery-1.10.2.min.js"></script>
        <p id="grafico"></p>

</body>
</html>

这里的问题应该是javascript:

<script type="text/javascript">
    var SPARQL_ENDPOINT = 'http://datos.zaragoza.es/sparql';
    var query = 'PREFIX pproc: <http://contsem.unizar.es/def/sector-        publico/pproc#>\
    PREFIX dcterms: <http://purl.org/dc/terms/>\
    SELECT DISTINCT ?CIF COUNT(?Titulo) as ?Contratos \
    WHERE {\
    ?uri a <http://contsem.unizar.es/def/sector-publico/pproc#Contract>.\
    ?uri dcterms:title ?Titulo.\
    ?uri <http://purl.org/procurement/public-contracts#tender> ?a.\
    ?a   <http://purl.org/procurement/public-contracts#supplier> ?empresaid.\
    ?empresaid <http://www.w3.org/ns/org#identifier> ?CIF.\
    }\
    ORDER BY desc(?Contratos)\
    LIMIT 50';


    $.getJSON(SPARQL_ENDPOINT + '?query=' + encodeURIComponent(query) +      '&format=application%2Fsparql-results%2Bjson&timeout=0')
      .success(function(data) {

    var diameter = 1300,
    format = d3.format(",d");

    var color = d3.scale.ordinal()
    .domain(["Sqoop", "Pig", "Apache", "a", "b", "c", "d", "e", "f", "g"])
    .range(["steelblue", "pink", "lightgreen", "violet", "orangered",     "green", "orange", "skyblue", "gray", "aqua"]);

    var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(10);

    var svg = d3.select("#chart").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

    var node = svg.selectAll(".node")
    .data(bubble.nodes(classes(data.results))
    .filter(function (d) {
    return !d.children;
    }))
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
    return "translate(" + d.x + "," + d.y + ")";
    });

    node.append("title")
    .text(function(d) { return d.className.value + ": " + d.value; });

    node.append("circle")
    .attr("r", function (d) {
    return d.r;
    })
    .style("fill", function (d, i) {
    return color(i);
    });

    node.append("text")
    .attr("dy", ".3em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.className.value + ": " + d.value; });



// Returns a flattened hierarchy containing all leaf nodes under the root.

function classes(root) {
var classes = [];

function recurse(name, node) {
    if (node.bindings) node.bindings.forEach(function (child) {
        recurse(node.CIF, child);
    });
    else classes.push({
        packageName: name,
        className: node.CIF,
        value: node.Contratos.value
    });
   }

recurse(null, root);
return {
    children: classes
};
}

d3.select(self.frameElement).style("height", diameter + "px");



    });
</script>

我不明白为什么它不起作用,因为在这两种情况下对象都是相同的。

任何评论都会非常有用。

0 个答案:

没有答案