c# - d3.js 图表未显示在 asp.net 页面上

Question

正如标题所示，我无法让图表显示在我的 asp.NET 页面上的“MainContent”占位符中。如果我将选择从“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 容器的左上角。我已更新代码片段以反射(reflect)这一点。

更新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 + ")";
            }
        });