Nano Hash - криптовалюты, майнинг, программирование

D3js — добавить прозрачный разрыв между путями в круговой диаграмме

У меня есть простая круговая диаграмма, созданная с помощью d3js, и я хотел бы добавить прозрачный промежуток между каждым путем.

paths = pieWrap.selectAll("path")
            .data(pie(data)).enter()
            .append("path")
            .style("fill", "rgba(90, 168, 217, 1)")
            .style("stroke", "#FFF")
            .style("stroke-width", "1")
            .style("stroke-opacity", "0")
            .attr("d", arc);

Пример здесь: http://jsfiddle.net/x4p0eLmL/2/

Просто чтобы знать, в моем случае фон — это изображение, поэтому я не могу использовать его цвет. Я пробовал обводку-непрозрачность, но, похоже, это не работает. Есть ли правильный способ сделать это с d3js?

Спасибо

javascript svg d3.js
01.06.2015

  • Пробовали использовать дробь? jsfiddle.net/x4p0eLmL/4 01.06.2015
  • Извините, возможно, я не совсем ясно выразился, я хочу, чтобы зазор был полностью прозрачным. 02.06.2015
  • можете ли вы преобразовать каждый кусок пирога n-px наружу от центра? 02.06.2015
  • У меня была та же идея, что и @redress: jsfiddle.net/x4p0eLmL/9 см. .attr("transform", function(path) {.... Он подходит для небольших зазоров между дорожками. Каждый путь переводится во внешний круг с помощью radius+3 в текущем примере. Существует проблема с более широкими промежутками, где круг может быть искажен. 02.06.2015
  • @ user3714582, вы должны написать это как ответ, я бы проголосовал за него. 02.06.2015

Ответы:


1

У меня была та же идея, которую предложил @redress: http://jsfiddle.net/x4p0eLmL/9/. Добавленная часть выглядит следующим образом:

.attr("transform", function(path) {
    middleAngle = -Math.PI/2 + (path.startAngle+path.endAngle)/2;
    dx = 3 * Math.cos(middleAngle);
    dy = 3 * Math.sin(middleAngle);
    return "translate("+dx+", "+dy+")";
})

path имеет атрибуты startAngle и endAngle. Там вычисляется средний угол и переводится. Он подходит для небольших зазоров между дорожками. В текущем примере каждый путь преобразуется во внешний круг с радиусом +3. Существует проблема с «более широкими» промежутками, где круг может быть «искажен».

01.06.2015
  • Большой! Именно то, что я искал! Благодарю вас ! 02.06.2015
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..