Question

正如标题所说，我无法让图形显示在我的asp.NET页面的“MainContent”占位符中。如果我将select从“MainContent”更改为“body”，则图表会显示在页面底部。

代码段：

var w = 960， h = 500， r = 30， fill = d3.scale.category20（）;

    var force = d3.layout.force()
        .charge(-120)
        .linkDistance(60)
        .size([w, h]);

    var svg = d3.select("body").append("svg:svg")
        .attr("width", w)
        .attr("height", h);

    d3.json("graph.json", function (json) {
        var link = svg.selectAll("line")
            .data(json.links)
          .enter().append("svg:line");

        var node = svg.selectAll("g myCircleText")
          .data(json.nodes)

        var elemEnter = node.enter()
          .append("g")

        elemEnter.append("text")
          //.attr("dx", function (d) { return -20 })
          .text(function (d) { return d.name })

        var circle = elemEnter.append("circle")
          .attr("r", r)
          .style("fill", function (d) { return fill(d.group); })
            .style("stroke", function (d) { return d3.rgb(fill(d.group)).darker(); })
            .call(force.drag);

        force
            .nodes(json.nodes)
            .links(json.links)
            .on("tick", tick)
            .start();

        function tick(e) {

            // Push sources up and targets down to form a weak tree.
            var k = 6 * e.alpha;
            json.links.forEach(function (d, i) {
                d.source.y -= k;
                d.target.y += k;
            });

            circle.attr("cx", function (d) { return d.x; })
                .attr("cy", function (d) { return d.y; });

            link.attr("x1", function (d) { return d.source.x; })
                .attr("y1", function (d) { return d.source.y; })
                .attr("x2", function (d) { return d.target.x; })
                .attr("y2", function (d) { return d.target.y; });
        }
    });`

我也无法在每个节点上显示文字，我已经做了很多搜索，但还没有解决这两个问题。

更新我已设法在我的图表中显示文本。但是，文本不会显示在圆圈内，而是显示在svg容器的左上角。我已更新了代码段以反映这一点。

更新2： 我现在让图表显示在正确的位置。解决方案就像将脚本放在div中，然后在脚本中选择所述div一样简单。我还没弄明白如何在一个圆圈内显示文字。

Answer 1

问题解决了，希望这可以帮助那些处于相似位置的人。继承人我的解决方案。我可以纠正这是否是一个构造良好的解决方案，但它对我有用。

修改如果有人知道如何在每一行的末尾添加标记，我将非常感谢您的输入！

代码段：

var w = 960, h = 500, r = 35, fill = d3.scale.category20(); var force = d3.layout.force() .charge(-500) .linkDistance(180) .size([w, h]); var svg = d3.select("#chart").append("svg:svg") .attr("width", w) .attr("height", h); d3.json("graph.json", function (json) { var link = svg.selectAll("line") .data(json.links) .enter().append("svg:line"); var circle = svg.append("g").selectAll("circle") .data(json.nodes) .enter().append("circle") .attr("r", r) circle.style("fill", "#2185c5") .call(force.drag); var text = svg.append("g").selectAll("text") .data(json.nodes) .enter().append("text") .attr("text-anchor", "middle") text.style("fill", "black") text.style("font-weight", "900") //.call(force.drag) .text(function (d) { return d.name; }); force .nodes(json.nodes) .links(json.links) .on("tick", tick) .start(); function tick(e) { // Push sources up and targets down to form a weak tree. var k = 6 * e.alpha; json.links.forEach(function (d, i) { d.source.y -= k; d.target.y += k; }); circle.attr("transform", transform); text.attr("transform", transform); link.attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; }) .attr("y2", function (d) { return d.target.y; }); } function transform(d) { return "translate(" + d.x + "," + d.y + ")"; } });

d3.js图形不显示在asp.net页面上

1 个答案: