Styjun

Credit card offering 0.5 miles for every cent rounded up. Too good to be true?

Opposite of "Squeaky wheel gets the grease"

What's the logic behind the the organization of Hamburg's bus transport into "rings"?

Java guess the number

How to make a setting relevant?

How bad would a partial hash leak be, realistically?

X-shaped crossword

Pronoun introduced before its antecedent

How to make thick Asian sauces?

How to pass a regex when finding a directory path in bash?

Smooth switching between 12v batteries, with toggle switch

Should I "tell" my exposition or give it through dialogue?

Short story written from alien perspective with this line: "It's too bright to look at, so they don't"

Company did not petition for visa in a timely manner. Is asking me to work from overseas, but wants me to take a paycut

What happens to foam insulation board after you pour concrete slab?

What is the purpose of building foundations?

Movie where a boy is transported into the future by an alien spaceship

How do I write "Show, Don't Tell" as an Asperger

Is it legal in the UK for politicians to lie to the public for political gain?

How do I calculate APR from monthly instalments?

Finding row wise sum of transpose of hv-convex binary matrix

Do adult Russians normally hand-write Cyrillic as cursive or as block letters?

Can a 2nd-level sorcerer use sorcery points to create a 2nd-level spell slot?

Why don’t airliners have temporary liveries?

d3 text cut off / goes beyond chart area

jQuery Set Cursor Position in Text AreaForce Directed Graphs with Labels$location not working in AngularJS using d3.jsarray_replace in D3.js?d3 - trigger event on second clickX Y Co-ordinates of Stacked BarX & Y Co-ordinates of selective bars in a stack graphD3 JS Displaying Text Next To CircleD3 Y Scale, y vs height?Unable to create SVG Groups

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

1

Text is going beyond the chart. The idea is if i is greater than 1500 and title length is greater than 5 characters long then text is shifted to the left by 100px.

What am I doing wrong?

Codepen

Here is my approach:

let rect = svg.selectAll('g')
 .data(combined)
 .enter()
 .append('g')
 .on('mouseover', function () 

 d3.select(this)
 .append('text')
 .attr('class', 'text')
 .attr('x', function (d) 
 return xScale(d.revenue);
 )
 .attr('y', function (d) 
 return yScale.bandwidth() + 175;
 )
 .style('font-size', 10)
 .attr('dy', -20)
 .attr('dx', function (d, i) 
 if (d.title.length > 5 && i > 1500) 
 return -100;
 else 
 return 10;
 
 )
 .text(d => d.title)
 )
 .on("mouseout", function () 
 d3.select('.text')
 .remove();

 );

javascript object d3.js

share|improve this question

asked Mar 24 at 14:24

Edgar KiljakEdgar Kiljak

514213

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it's your i > 1500 - that never happens...
  
  – ee2Dev
  Mar 24 at 14:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you want to prevent cutting off the text, you should have a condition like: if (d3.select(this).attr("x") > 400) or better to set the text-anchor based on the position to achieve this
  
  – ee2Dev
  Mar 24 at 14:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks this works, if you post an answer I'll accept it
  
  – Edgar Kiljak
  Mar 24 at 14:58
  

  
  
  
  

add a comment | 

2

1

Text is going beyond the chart. The idea is if i is greater than 1500 and title length is greater than 5 characters long then text is shifted to the left by 100px.

What am I doing wrong?

Codepen

Here is my approach:

let rect = svg.selectAll('g')
 .data(combined)
 .enter()
 .append('g')
 .on('mouseover', function () 

 d3.select(this)
 .append('text')
 .attr('class', 'text')
 .attr('x', function (d) 
 return xScale(d.revenue);
 )
 .attr('y', function (d) 
 return yScale.bandwidth() + 175;
 )
 .style('font-size', 10)
 .attr('dy', -20)
 .attr('dx', function (d, i) 
 if (d.title.length > 5 && i > 1500) 
 return -100;
 else 
 return 10;
 
 )
 .text(d => d.title)
 )
 .on("mouseout", function () 
 d3.select('.text')
 .remove();

 );

javascript object d3.js

share|improve this question

asked Mar 24 at 14:24

Edgar KiljakEdgar Kiljak

514213

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it's your i > 1500 - that never happens...
  
  – ee2Dev
  Mar 24 at 14:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you want to prevent cutting off the text, you should have a condition like: if (d3.select(this).attr("x") > 400) or better to set the text-anchor based on the position to achieve this
  
  – ee2Dev
  Mar 24 at 14:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks this works, if you post an answer I'll accept it
  
  – Edgar Kiljak
  Mar 24 at 14:58
  

  
  
  
  

add a comment | 

Text is going beyond the chart. The idea is if i is greater than 1500 and title length is greater than 5 characters long then text is shifted to the left by 100px.

What am I doing wrong?

Codepen

Here is my approach:

let rect = svg.selectAll('g')
 .data(combined)
 .enter()
 .append('g')
 .on('mouseover', function () 

 d3.select(this)
 .append('text')
 .attr('class', 'text')
 .attr('x', function (d) 
 return xScale(d.revenue);
 )
 .attr('y', function (d) 
 return yScale.bandwidth() + 175;
 )
 .style('font-size', 10)
 .attr('dy', -20)
 .attr('dx', function (d, i) 
 if (d.title.length > 5 && i > 1500) 
 return -100;
 else 
 return 10;
 
 )
 .text(d => d.title)
 )
 .on("mouseout", function () 
 d3.select('.text')
 .remove();

 );

javascript object d3.js

share|improve this question

asked Mar 24 at 14:24

Edgar KiljakEdgar Kiljak

514213

let rect = svg.selectAll('g')
 .data(combined)
 .enter()
 .append('g')
 .on('mouseover', function () 

 d3.select(this)
 .append('text')
 .attr('class', 'text')
 .attr('x', function (d) 
 return xScale(d.revenue);
 )
 .attr('y', function (d) 
 return yScale.bandwidth() + 175;
 )
 .style('font-size', 10)
 .attr('dy', -20)
 .attr('dx', function (d, i) 
 if (d.title.length > 5 && i > 1500) 
 return -100;
 else 
 return 10;
 
 )
 .text(d => d.title)
 )
 .on("mouseout", function () 
 d3.select('.text')
 .remove();

 );

share|improve this question

asked Mar 24 at 14:24

Edgar KiljakEdgar Kiljak

514213

share|improve this question

asked Mar 24 at 14:24

Edgar KiljakEdgar Kiljak

514213

asked Mar 24 at 14:24

Edgar KiljakEdgar Kiljak

514213

asked Mar 24 at 14:24

Edgar KiljakEdgar Kiljak

514213

1 Answer
1

active

oldest

votes

2

The i refers to the index of the selection elements, since you have just one, i never exceeds 0.

If you want to prevent cutting off the text, you should have a condition like:

if (d3.select(this).attr("x") > 400)
...

or better you set the text-anchor based on the position to achieve this.

share|improve this answer

answered Mar 24 at 15:03

ee2Devee2Dev

1,1851120

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55324794%2fd3-text-cut-off-goes-beyond-chart-area%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

The i refers to the index of the selection elements, since you have just one, i never exceeds 0.

If you want to prevent cutting off the text, you should have a condition like:

if (d3.select(this).attr("x") > 400)
...

or better you set the text-anchor based on the position to achieve this.

share|improve this answer

answered Mar 24 at 15:03

ee2Devee2Dev

1,1851120

add a comment | 

2

The i refers to the index of the selection elements, since you have just one, i never exceeds 0.

If you want to prevent cutting off the text, you should have a condition like:

if (d3.select(this).attr("x") > 400)
...

or better you set the text-anchor based on the position to achieve this.

share|improve this answer

answered Mar 24 at 15:03

ee2Devee2Dev

1,1851120

add a comment | 

The i refers to the index of the selection elements, since you have just one, i never exceeds 0.

If you want to prevent cutting off the text, you should have a condition like:

if (d3.select(this).attr("x") > 400)
...

or better you set the text-anchor based on the position to achieve this.

share|improve this answer

answered Mar 24 at 15:03

ee2Devee2Dev

1,1851120

if (d3.select(this).attr("x") > 400)
...

share|improve this answer

answered Mar 24 at 15:03

ee2Devee2Dev

1,1851120

answered Mar 24 at 15:03

ee2Devee2Dev

1,1851120

answered Mar 24 at 15:03

ee2Devee2Dev

1,1851120