Вопросы Теги

Нарисуйте круги с текстом в середине, используя Javascript / CSS [duplicate]

Недавно я столкнулся с той же проблемой. Моя версия eclipse не поддерживала java-версию 8.

Я случайно установил jre 8 на моем компьютере, который автоматически обновил мою переменную PATH, добавив «C: \ ProgramData \ Oracle \ Java \ javapath "в начале, заставив затмение забрать эту версию (и проигнорировать добавленную вручную версию 1.6, которая появилась позже) и сбой с кодом выхода 13.

Я просто удалил эту строку из путь, из-за которого система подбирала мою старую версию, и затмение началось просто отлично.

41
задан VividD 16 January 2014 в 14:59
поделиться

3 ответа

Есть множество примеров , показывающих, как добавлять метки к визуализации графа и дерева, но я, вероятно, начинаю с этого как самый простой:

Вы не разместили ссылку на свой код, но я предполагаю, что node ссылается на выбор элементов окружности SVG. Вы не можете добавлять текстовые элементы в элементы окружности, поскольку элементы окружности не являются контейнерами ; добавление текстового элемента в круг будет проигнорировано.

Обычно вы используете элемент G для группировки элемента окружности (или элемента изображения, как указано выше) и текстового элемента для каждого узла. Полученная структура выглядит так: 

<g class="node" transform="translate(130,492)">
  <circle r="4.5"/>
  <text dx="12" dy=".35em">Gavroche</text>
</g>

Используйте data-join для создания элементов G для каждого узла, а затем используйте selection.append , чтобы добавить круг и текстовый элемент для каждого. Что-то вроде этого: 

var node = svg.selectAll(".node")
    .data(nodes)
  .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", 4.5);

node.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

. Один недостаток этого подхода состоит в том, что вы можете захотеть, чтобы метки были нарисованы поверх кругов. Поскольку SVG еще не поддерживает z-индекс, элементы рисуются в порядке документа; поэтому вышеприведенный подход заставляет метку нарисовать над ее окружностью , но ее можно нарисовать в других кругах . Вы можете исправить это, используя два объединения данных и создание отдельных групп для кругов и меток, например: 

<g class="nodes">
  <circle transform="translate(130,492)" r="4.5"/>
  <circle transform="translate(110,249)" r="4.5"/>
  …
</g>
<g class="labels">
  <text transform="translate(130,492)" dx="12" dy=".35em">Gavroche</text>
  <text transform="translate(110,249)" dx="12" dy=".35em">Valjean</text>
  …
</g>

И соответствующий JavaScript: 

var circle = svg.append("g")
    .attr("class", "nodes")
  .selectAll("circle")
    .data(nodes)
  .enter().append("circle")
    .attr("r", 4.5)
    .call(force.drag);

var text = svg.append("g")
    .attr("class", "labels")
  .selectAll("text")
    .data(nodes)
  .enter().append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

Этот метод используемый в примере мобильных патентных костюмов (с дополнительным текстовым элементом, используемым для создания белой тени).

79
ответ дан mbostock 15 August 2018 в 17:19
поделиться
  • 1
    Я не уверен, что эта линия была шуткой: начните с этого как самого простого - конечно, не похоже, что это для нас простой народ. – thedanotto 13 July 2018 в 18:08

Если вы хотите, чтобы узлы соответствовали большим ярлыкам, вы можете использовать свойство getBBox текстового узла SVG после того, как вы его нарисовали. Вот как я это сделал, для списка узлов с фиксированными координатами и двух возможных фигур: 

nodes.forEach(function(v) {
  var nd;
  var cx = v.coord[0];
  var cy = v.coord[1];

  switch (v.shape) {
    case "circle":
      nd = svg.append("circle");
      break;
    case "rectangle":
      nd = svg.append("rect");
      break;
  }

  var w = 10;
  var h = 10;
  if (v.label != "") {
    var lText = svg.append("text");

    lText.attr("x", cx)
         .attr("y", cy + 5)
         .attr("class", "labelText")
         .text(v.label);

    var bbox = lText.node().getBBox();
    w = Math.max(w,bbox.width);
    h = Math.max(h,bbox.height);
  }

  var pad = 4;

  switch (v.shape) {
    case "circle":
      nd.attr("cx", cx)
        .attr("cy", cy)
        .attr("r", Math.sqrt(w*w + h*h)/2 + pad);
      break;
    case "rectangle":
      nd.attr("x", cx - w/2 - pad)
        .attr("y", cy - h/2 - pad)
        .attr("width", w + 2*pad)
        .attr("height", h + 2*pad);
      break;
  }

});

Обратите внимание, что форма добавлена, текст добавлен, , затем форма позиционируется, чтобы текст отображался сверху.

2
ответ дан Aleks Kissinger 15 August 2018 в 17:19
поделиться

Я нашел это руководство очень полезным в попытке выполнить нечто подобное:

https://www.dashingd3js.com/svg-text-element

Основываясь на ссылке выше, этот код будет генерировать метки окружности: 

<!DOCTYPE html>
<html>
  <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   </head>
<body style="overflow: hidden;">
<div id="canvas"  style="overflow: hidden;"></div>

<script type="text/javascript">

    var graph = {
        "nodes": [
            {name: "1", "group": 1, x: 100, y: 90, r: 10 , connected : "2"},
            {name: "2", "group": 1, x: 200, y: 50, r: 15, connected : "1"},
            {name: "3", "group": 2, x: 200, y: 130, r: 25, connected : "1"}
        ]
    }

    $( document ).ready(function() {

        var width = 2000;
        var height = 2000;

        var svg = d3.select("#canvas").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g");

        var lines = svg.attr("class", "line")
                .selectAll("line").data(graph.nodes)
                .enter().append("line")
                .style("stroke", "gray") // <<<<< Add a color
                .attr("x1", function (d, i) {
                    return d.x
                })
                .attr("y1", function (d) {
                    return d.y
                })
                .attr("x2", function (d) {
                    return findAttribute(d.connected).x
                })
                .attr("y2", function (d) {
                    return findAttribute(d.connected).y
                })

        var circles = svg.selectAll("circle")
                .data(graph.nodes)
                .enter().append("circle")
                .style("stroke", "gray")
                .style("fill", "white")
                .attr("r", function (d, i) {
                    return d.r
                })
                .attr("cx", function (d, i) {
                    return d.x
                })
                .attr("cy", function (d, i) {
                    return d.y
                });

        var text = svg.selectAll("text")
                                .data(graph.nodes)
                                .enter()
                               .append("text");

        var textLabels = text
          .attr("x", function(d) { return d.x; })
          .attr("y", function(d) { return d.y; })
          .text( function (d) { return d.name })
          .attr("font-family", "sans-serif")
          .attr("font-size", "10px")
          .attr("fill", "red");

    });

    function findAttribute(name) {
        for (var i = 0, len = graph.nodes.length; i < len; i++) {
            if (graph.nodes[i].name === name)
                return graph.nodes[i]; // Return as soon as the object is found
        }
        return null; // The object was not found
    }


</script>
</body>
</html>
1
ответ дан blue-sky 15 August 2018 в 17:19
поделиться
  • 1
    Хотя эта ссылка может ответить на вопрос, лучше включить здесь основные части ответа и предоставить ссылку для справки. Ответные ссылки могут стать недействительными, если связанная страница изменится. – Whymarrh 22 September 2014 в 23:43
  • 2
    @Whymarrh ответ обновлен – blue-sky 22 September 2014 в 23:48
Другие вопросы по тегам:

Похожие вопросы: