Dragging the force layout, the elements are positioned quite a distance from where they should be

Question

Dragging the force layout, the elements are positioned quite a distance from where they should be

Currently, I am working on a class project that involves multiple data points associated with time. Users should be able to drag these points if they overlap.

The X-axis is fixed to the date while the Y-axis can be adjusted by dragging.

I found an example online and made some modifications, but it seems like the circle and text are not aligned for the same object.

I suspect this issue is related to the tick function:

var ticked = function() {    
    node.attr("transform", function (d) {
    return "translate(" + x(d.date) + "," + d.y + ")";
});

In an attempt to resolve this, I created a different tick function with an altered setup. While the circles now appear in the correct position, unfortunately, the text does not append to them.

data= [
        {id: "Object1", date: "2017-08-21", name: "Object1", count: .4, subtopics: []},
        {id: "Object2", date: "2017-08-22", name: "Object2", count: 1, subtopics: []},
        {id: "Object3", date: "2017-08-25", name: "Object3", count: 2, subtopics: []},  
        {id: "Object4", date: "2017-08-25", name: "Object4", count: 2, subtopics: []},
        {id: "Object5", date: "2017-08-27", name: "Object5", count: 2, subtopics: []},
        {id: "Object6", date: "2017-08-30", name: "Object6", count: 2, subtopics: []},
]

// Additional JavaScript code here

javascript html css d3.js

Answer 1

Answer №1

Within your initial code, the `x` position is being applied to the circles:

.attr("cx", function(d) { 
    return x(d.date); 
})

Avoid that: let the `tick` function handle both the `x` and `y` positions.

Below is your modified code with that line removed:

data= [
        {id: "Object1", date: "2017-08-21", name: "Object1", count: .4, subtopics: []},
        {id: "Object2", date: "2017-08-22", name: "Object2", count: 1, subtopics: []},
        {id: "Object3", date: "2017-08-25", name: "Object3", count: 2, subtopics: []},  
        {id: "Object4", date: "2017-08-25", name: "Object4", count: 2, subtopics: []},
        {id: "Object5", date: "2017-08-27", name: "Object5", count: 2, subtopics: []},
        {id: "Object6", date: "2017-08-30", name: "Object6", count: 2, subtopics: []},
]


var r = d3.scaleSqrt()
        .domain([0, d3.max(data, function (d) {
            return d.count;
        })])
        .range([0, 65]);


var margin = {top: 20, right: 20, bottom: 100, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseTime = d3.timeParse("%Y-%m-%d");
    
data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.close = +d.close;
  });
    
var simulation = d3.forceSimulation()
            .force("charge", d3.forceManyBody().strength(-700).distanceMin(100).distanceMax(1000)) 
            .force("link", d3.forceLink().id(function(d) { return d.index })) 
            .force("center", d3.forceCenter(width / 2, height / 2))
            .force("y", d3.forceY(0.001))
            .force("x", d3.forceX(0.001))
    
    
var svg = d3.select('body').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom),
g = svg.append('g')
    .attr('transform','translate(' + margin.left + ',' + margin.top + ')');


var formatNumber = d3.format('');
var x = d3.scaleTime()
.range([0, width]);
x.domain(d3.extent(data, function(d) { return d.date; }));

svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x)
              .tickFormat(d3.timeFormat("%Y-%m -%d")))


var node = g.selectAll('.node')
  .data(data)
  .enter().append('g')
    .attr("class", "node")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

node.append('circle')
    .attr('r', function(d) {return Math.max(16, r(d.count)); })
    .style("stroke", "Pink")
    .style("fill", "transparent");      
        
node.append('text')
    .text(function(d){return d.name})
    .attr("text-anchor", "middle")
    .attr("pointer-events", "none");
       

var ticked = function() {
    node.attr("transform", function (d) {
        return "translate(" + x(d.date) + "," + d.y + ")";
    });
}         
    
simulation
    .nodes(data)
    .on("tick", ticked);

function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
}
        
function dragged(d) {
        d.fy = d3.event.y;
}
        
function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
}

<!DOCTYPE html>
<meta charset="utf-8">
<head>

   
    


</head>

<body style="margin:10px 0">

</div>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="./scripts/main.js"></script>

</body>
</html>

Answer 2

Within your initial code, the `x` position is being applied to the circles:

.attr("cx", function(d) { 
    return x(d.date); 
})

Avoid that: let the `tick` function handle both the `x` and `y` positions.

Below is your modified code with that line removed:

data= [
        {id: "Object1", date: "2017-08-21", name: "Object1", count: .4, subtopics: []},
        {id: "Object2", date: "2017-08-22", name: "Object2", count: 1, subtopics: []},
        {id: "Object3", date: "2017-08-25", name: "Object3", count: 2, subtopics: []},  
        {id: "Object4", date: "2017-08-25", name: "Object4", count: 2, subtopics: []},
        {id: "Object5", date: "2017-08-27", name: "Object5", count: 2, subtopics: []},
        {id: "Object6", date: "2017-08-30", name: "Object6", count: 2, subtopics: []},
]


var r = d3.scaleSqrt()
        .domain([0, d3.max(data, function (d) {
            return d.count;
        })])
        .range([0, 65]);


var margin = {top: 20, right: 20, bottom: 100, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseTime = d3.timeParse("%Y-%m-%d");
    
data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.close = +d.close;
  });
    
var simulation = d3.forceSimulation()
            .force("charge", d3.forceManyBody().strength(-700).distanceMin(100).distanceMax(1000)) 
            .force("link", d3.forceLink().id(function(d) { return d.index })) 
            .force("center", d3.forceCenter(width / 2, height / 2))
            .force("y", d3.forceY(0.001))
            .force("x", d3.forceX(0.001))
    
    
var svg = d3.select('body').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom),
g = svg.append('g')
    .attr('transform','translate(' + margin.left + ',' + margin.top + ')');


var formatNumber = d3.format('');
var x = d3.scaleTime()
.range([0, width]);
x.domain(d3.extent(data, function(d) { return d.date; }));

svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x)
              .tickFormat(d3.timeFormat("%Y-%m -%d")))


var node = g.selectAll('.node')
  .data(data)
  .enter().append('g')
    .attr("class", "node")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

node.append('circle')
    .attr('r', function(d) {return Math.max(16, r(d.count)); })
    .style("stroke", "Pink")
    .style("fill", "transparent");      
        
node.append('text')
    .text(function(d){return d.name})
    .attr("text-anchor", "middle")
    .attr("pointer-events", "none");
       

var ticked = function() {
    node.attr("transform", function (d) {
        return "translate(" + x(d.date) + "," + d.y + ")";
    });
}         
    
simulation
    .nodes(data)
    .on("tick", ticked);

function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
}
        
function dragged(d) {
        d.fy = d3.event.y;
}
        
function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
}

<!DOCTYPE html>
<meta charset="utf-8">
<head>

   
    


</head>

<body style="margin:10px 0">

</div>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="./scripts/main.js"></script>

</body>
</html>

Dragging the force layout, the elements are positioned quite a distance from where they should be

Answer №1

Similar questions

When using express and passport-local, the function `req.isAuthenticated()` will typically return a

Having difficulty in selecting the element

Rotating the model from its center after panning the model

Transform your HTML tags into a different format with CKEditor (BBCode format conversion)

Tips for maintaining the fixed position of the second div despite an increase in the height of the first div

When the open button is clicked, the Div will toggle between open and closed states

What steps can be taken to prevent the controller action if the password and confirm password do not match?

The map function is not functioning properly following a state update in React

Endless Google Locations Instances

Using JSON.parse to convert a JSON list into a JavaScript array is not functioning correctly

leveraging jquery for delaying, subsequently fading out, and ultimately removing

positioning two text sections on the left side of an image

Resolving the Issue with onClick Events in Closures

The $scope in Angular doesn't seem to be working as expected in the callback function, despite using $scope

struggling to modify hooks variable while fetching multiple URLs in React

The art of organizing information: Tables and data management

Is it possible to assign a width property to a div element?

Encountered an exception while trying to retrieve data with a successful status code of 200

Having trouble retrieving data from mongo db collection - data not found

Having trouble with JavaScript not functioning correctly within the Update Panel?